Best way to size containers in Flex to obey ONLY parent containers' explicit dimensions

Question

I've been running into this problem with Flex for nearly a year, and each time I work up a quick hack solution that works for the time being. I'd like to see if anyone has a better idea.

Here are the conditions of a problem:

|------Container  ------------|
|  explicitHeight:  400 (or whatever)
|                             |
|  |-------- VBox  -------|   |
|  |  percentHeight: 100  |   | 
|  |                      |   |
|  |  |-Repeater------|   |   |
|  |  | Potentially   |   |   |
|  |  | a lot of stuff.   |   |
|--|--|---------------|---|---|

The problem is that, contrary to what I would like to happen, the VBox will ALWAYS expand to accommodate the content inside it, instead of sticking to the explicit height of its parent and creating a scroll bar.

My solution has been to hard code in a reference to the parent (or however far up the display list we need to go to find an explicitly set value as opposed to a percentage).

I've even considered using this in a utility class:

public static function getFirstExplicitHeightInDisplayList(comp:UIComponent):Number{
    if (!isNaN(comp.explicitHeight)) return comp.explicitHeight;
    if (comp.parent is UIComponent) return    
         getFirstExplicitHeightInDisplayList(UIComponent(comp.parent));
    else return 0;
}

Please tell me there's a better way.

Answer 1

You have to use the "autoLayout" parameter on the VBox as documentation say:

"By default, the size of the VBox container is big enough to hold the image at it original size. If you disable layout updates, and use the Zoom effect to enlarge the image, or use the Move effect to reposition the image, the image might extend past the boundaries of the VBox container.

You set the autoLayout property to false, so the VBox container does not resize as the image resizes. If the image grows to a size so that it extends beyond the boundaries of the VBox container, the container adds scroll bars and clips the image at its boundaries.

I hope that will help you.

Answer 2

Set the properties of your Container:

clipContent = true;
verticalScrollPolicy = "off"

Then your VBox should automatically clip when it has percentHeight = 100;

Works for me in Flex 3.

If you need to get really fancy, you can set the scrollRect on objects:

scrollRect = new Rectangle(x, y, w, h);

depending on what you need it to do.

Answer 3

setting minHeight = 0 is all you need to do.

This tells the VBox to ignore it's children's measurements when sizing itself, and calculate its height instead based on it's own/it's parents constraints. Set everything else as you normally would, scrolling and everything else will work perfectly.

Spent DAYS on this one a year ago- it's not intuitive, they could have probably named the property better. Hope this saves u guys some time...

Answer 4

AutoLayout=false seems to only prevent layout from being rerun when the childrens' size change. However if you add or remove children, layout will rerun anyway.

Setting minHeight=0 does indeed completely disconnect the (outer) size of the VBox from the size and number of the children, which is what I wanted.

Pawing through the Flex source code I didn't see the mechanism by which setting minHeight=0 made it work like I wanted, so I salute Yarin for discovering it. Thanks!