3 Replies Latest reply on May 28, 2008 4:57 PM by

    simple flex layout problem

      I have what I would expect to be a very simple layout, but can't get it to behave the way I thought it should.

      Basically, my application is set to 100% width and height. Within that, I have an HDividedBox with 80% width and height. Within that, I have 2 VBoxes in which the content is dynamic and can grow to any size. The problem is that my inner VBoxes push the HDividedBox larger than 80% of the Application resulting in the application showing scrollbars instead of the inner VBoxes. All I want is for the HDividedBox to remain 80% of the Application (browser window) and for the inner VBoxes to do their own scrolling if needed. My code is attached.

        • 1. Re: simple flex layout problem
          peterent Level 2
          The short answer is that what is happening is supposed to happen - it is not a bug. Personally, I think this is not the way it should work, but that's just my opinion. Here's what's happening:

          The Box containers are designed to grow to accomodate their children. If you have an HBox, each time you add a child component the HBox gets bigger. Makes sense, right? You can position the HBox within its parent using x and y properties or the top and left styles.

          Here's where it gets weird for me. If you use percentage sizes such as width="100%" on the HBox, this is merely a guide to how large it is. The HBox will continue to expand to show all of its children. When it's parent gets a report of the HBox size that it has exceeded its boundaries, the parent will either a) also grow larger or b) put up scrollbars - on itself, not on the HBox.

          It is the (a) case you are facing. You've used percentage sizing and so the containers are all expanding to fit their children.

          The solution is to set the width and/or height to absolute values. If you give the HBox a width="600" and you add children such that it gets larger than 600 pixels, the HBox won't expand, it will show a scrollbar.

          First, set the HDividedBox's width to be {width*.8} which will be 80% of the Application's width. Then set its children's height and width values to be calculations as well: height="{hdivbox.height*.8}" width="{hdivbox.width}" where hdivbox is the id of the HDividedBox.

          I can live with the behavior for percentages, but what I find frustrating is that the right and bottom constraint styles have no effect either. To me, setting top="5" and bottom="5" on a VBox should establish a calculated height. But it does not. It acts like the height="90%".

          You'll have to play with the calculations a bit, but that's the only way this will layout properly in my experience. Please file an enhancement request at http://bugs.adobe.com if you feel strongly about the way this behaves.

          1 person found this helpful
          • 2. Re: simple flex layout problem
            peterent Level 2

            If you haven't already made your changes according to what I said, there may be a simpler way to do this:

            On those containers you want to have the scrollbars, ADD minHeight="0" or minWidth="0" (depending on where you want the scrollbars).

            It turns out, the reason the scrollbars propagate to the Application is that by default, the containers do not want to get smaller than their measured size. By setting minWidth or minHeight to 0 (zero), you tell the Flex framework that it is OK for the containers to be smaller than their children and thus, get their own scrollbars.

            Give that a try.
            • 3. Re: simple flex layout problem
              The second solution did the trick! Thanks for the help! I'll definitely submit this as an enhancement request.