The objective:

The screen grab below is taken from a Flex application I’m building. This page of the app comprises of 2 VBoxes inside an HBox. The 2 VBoxes need to size to 100% of the height of the HBox container. The user can edit any of the text fields. When the user edits the body text of the left column, if they use up all the vertical space of that left VBox then I’d like the VBox containing the title and the boy text to create scroll bars, not to resize it’s parent VBox. Simple right?

Not so simple… Here’s a snippet of the code:

<mx:VBox width=”50%” height=”100%” styleName=”whiteContainer”>

<mx:Box direction=”vertical” width=”100%” height=”100%” styleName=”scrollableContentWithText” >
<mx:HBox width=”100%” verticalAlign=”middle”>
<mx:Image source=”assets/images/book74x42.png” width=”74″ height=”42″ />
<controls:AdvancedTextArea id=”title1″ multiline=”false” textModify=”captialize” styleName=”whiteContainerHeader” condenseWhite=”true” width=”100%” prompt=”{resourceManager.getString(‘resources’,’ENTER_TEXT_PROMPT’).toUpperCase()}” />
</mx:HBox>
<controls:AdvancedTextArea id=”body1″ styleName=”blueOnWhiteText” condenseWhite=”true” width=”100%” prompt=”{resourceManager.getString(‘resources’,’ENTER_TEXT_PROMPT’)}” />
</mx:Box>
</mx:VBox>

And here are the results when that body text gets too deep for the VBox:

So the whole parent HBox ended up getting stretched. Not the results I expected.

The solution as it turns out is pretty straight forward. The VBox containing the left column needs it’s minHeight and minWidth properties set to 0! The reason is that with containers using percentage based sizing flex sets the min height and min width properties to the cumulative width and height of the container’s children components. So in my example as the editable text component gets deeper/taller this automatically increases the minHeight property of it’s parent container.

So by explicitly setting the parent container’s minHeight and minWidth to 0:

<mx:VBox width=”50%” height=”100%” styleName=”whiteContainer”>
<mx:Box direction=”vertical” width=”100%” height=”100%” minHeight=”0″ minWidth=”0″ styleName=”scrollableContentWithText” >
<mx:HBox width=”100%” verticalAlign=”middle”>
<mx:Image source=”assets/images/book74x42.png” width=”74″ height=”42″ />
<controls:AdvancedTextArea id=”title1″ multiline=”false” textModify=”captialize” styleName=”whiteContainerHeader” condenseWhite=”true” width=”100%” prompt=”{resourceManager.getString(‘resources’,’ENTER_TEXT_PROMPT’).toUpperCase()}” />
</mx:HBox>
<controls:AdvancedTextArea id=”body1″ styleName=”blueOnWhiteText” condenseWhite=”true” width=”100%” prompt=”{resourceManager.getString(‘resources’,’ENTER_TEXT_PROMPT’)}” />
</mx:Box>
</mx:VBox>

… I ended up with the desired result:



12 Comments

  1. Kalen Gibbons

    This is one of those times when the Flex framework just doesn’t work like you’d expect it to. It’s good to have solutions to as many of those little quirks as possible, thanks for the info.

  2. andrei

    Hi,

    I’m building a flex application and i actually need a vbox to scroll vertically.
    So I’ve tried something like this:

    But it seems the VBox is not scrolling, but the VBox is.

    Can you tell me what i’ve done wrong?

    I’m using Flex gumbo build v4.0.0.6233.

  3. andrei

    It seems the website ate my mxml, sorry bout that.
    Here’s the code:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml&quot; layout="absolute">

    <mx:HBox width="50%" verticalAlign="top"
    verticalScrollPolicy="on"
    minHeight="0" minWidth="0">
    <mx:Canvas height="1300" width="100%"
    backgroundColor="#ffffff"/>
    </mx:HBox>

    </mx:Application>

  4. Hal Frash

    Wow! Saved me a lot of headache as I was having this exact problem. Thank you! Thank you!

  5. Mike Rizzi

    Excellent. Your article saved me a lot of pain.

    I was dynamically creating different Flex UI components within a VBox that was to be 45% of it’s parent (with verticalScrollPolicy=”auto”) and as soon as the VBox filled up, it would grow the VBox instead of adding scrollbars. I’ve been reading about the LayoutManager trying to understand what I needed to do, and came across your posting. Just setting the minHeight to 0 solved my problem.

    Could you go into more detail (or provide a reference) as to why setting minHeight causes the VBox to now work as I would expect?

    Thanks again!

  6. Mike

    Thank you!

  7. flCraze

    Hi,

    Good solution for solving this percentHeight problem with Vbox, was struggling a lot,
    Thank you very much 🙂

  8. Lingu

    Hi.,

    I was using image with textarea, using vbox and hbox, image will be displayed in right corner. How to use it.. pls help me sample coding for this.

    Thank U

  9. Arnold Aprieto

    As quoted:
    “What we do for ourselves dies with us. What we do for others and the world remains and is immortal.”

    Thanks for sharing, saved me a whole lot of time analyzing.

  10. Christophe

    Thanks for the post. Was helpful. I lost several hours on this.

    Adobe should fix their code to work as expected, else at least document this behavior…

  11. Aavo Tambur

    Thanks!

  12. Terry

    You saved my life, Thank you very much~~~~!


Leave a reply