simple flex layout problem

[ssettl2]

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.

Thanks

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
height="100%" width="100%">
<mx:HDividedBox height="80%" width="80%">
<mx:VBox height="100%" width="80%" borderStyle="solid">
<mx:Panel height="1500" width="400">
<mx:Text width="100%" text="This panel is set to taller than the inner
left VBox, and I want the VBox to scroll instead of the application"/>
</mx:Panel>
</mx:VBox>
<mx:VBox height="100%" width="20%" borderStyle="solid">
<mx:Panel >
<mx:Label text="This panel is small"/>
</mx:Panel>
</mx:VBox>
</mx:HDividedBox>
</mx:Application>

[peterent]

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
[url]http://bugs.adobe.com[/url] if you feel strongly about the way this behaves.

[peterent]

Hi.

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.