Best way to sort containers in Flex to check explicit sizes for parent containers only

Question

I've been running into this problem with Flex for almost a year now and every time I develop a quick hacking solution that works for now. I would like to know if anyone has a better idea.

Here are the conditions of the 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 do, the VBox will ALWAYS expand to fit the contents inside it, rather than stick to its parent's explicit height and create a scroll bar.

My decision was related to the hard code in the link to the parent (or, nevertheless, far from the display list, we need to find the explicitly specified value, not the percentage).

I even thought about 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 the best way.

Answer 1

You should use the "autoLayout" parameter on the VBox, as the documentation says:

“By default, the size of the VBox container is large enough to keep the image in its original size. If you turn off layout updates and use the zoom effect to enlarge the image, or use the move effect to move the image, the image may extend beyond the VBox container.

You set the autoLayout property to false, so the VBox container does not change when the image is resized. If the image is enlarged to fit outside the VBox container, the container adds scroll bars and image clips at its borders.

I hope this helps you.

Answer 2

setting minHeight = 0 is all you need to do.

This tells VBox to ignore its child measurements when sizing and calculate its height instead of being based on its own / parental constraints. Set everything else as usual, scrolling and everything else will work fine.

DAYS held this year a year ago is not intuitive, they could probably name the property better. Hope this saves you some time ...

Answer 3

AutoLayout = false apparently prevents the re-creation of the layout when the child is resized. However, if you add or remove children, the layout will still repeat.

Setting minHeight = 0 really completely disables the (external) VBox size from the size and number of children, which I wanted.

Flashing through Flex source code I did not see the mechanism by which setting minHeight = 0 made it work the way I wanted, so I welcome Yarin to detect it. Thanks!

Answer 4

Set the properties of your container:

 clipContent = true; verticalScrollPolicy = "off" 

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

Works for me in Flex 3.

If you really need to, you can set scrollRect for objects:

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

depending on what you need.

Answer 5

In fact, Jarin Kessler brought us the only correct answer here (unfortunately, I have no right to comment on his post, so I do it here).

When your HBox size is based on a percentage, you hope that its size will only affect its container. This is wrong, there is another rule, more powerful. It is the fact that the container (which has HBox) has a minimum size, which is the addition of the default / explicit sizes of its own child components.

So, if your percentage value results in a value smaller than the minimum size, the minimum size wins and applies to the HBox. Since HBox displays all of its children, there is no need for scrollbars.

So using:

 minHeight = 0; minWidth = 0; 

recalls the story of HBox that its minimum size is 0, not the default. You redefine it, and thus the minimum size is less than a percentage and loses the battle.

The only phrase I found in the Adobe documentation explaining this is this:

Percentage container size is recommended. Flex makes the container large enough to fit its children with minimal dimensions.

I hope I understand

(feel free to correct my incorrect English sentences ...)