FlowBox allocates too much vertical space unless a specific pixel height value is given

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a new FlowBox with no height property, or a height property that
is a percentage;
2. Dynamically add children;
3. Observe the amount of vertical space allocated by the container.

What is the expected output? What do you see instead?

I expected the FlowBox container to allocate itself only the amount of
vertical space required to accommodate all of its rows.  If no 'height'
attribute is set, or one is set that uses a percentage, too much vertical
space is generated, and it seems proportional to the number of rows FlowBox
has created.  This results in unnecessary scrollbars and lots of empty
space.  Assigning a FlowBox a specific pixel 'height' property results in
the correct behavior, but that's not desirable for dynamic layouts.

What version of the product are you using? On what operating system?

Flex 3.0.0 on Mac OS 10.5.4.  Debug Flash Player 9.0.124.0.

Please provide any additional information below.

See attached code snippet which creates three FlowBoxes.  The first two are
not given a specific pixel height, and the vertical space allocated is way
too large.  The last FlowBox has a specific pixel height, and it's vertical
size is fine (i.e. just large enough to hold its contents).

Original issue reported on code.google.com by julian.s...@gmail.com on 4 Aug 2008 at 10:23

Attachments:

• testFLowBox.mxml

[GoogleCodeExporter]

Sorry, am using: flexlib-2.4.4

Original comment by julian.s...@gmail.com on 4 Aug 2008 at 10:25

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Its a hackish way to make it work, but if you add the following method into the
FlowBox it should fix this until someone can come up with something better :)

    protected override function measure():void
    {
        super.measure();
        if(!isNaN(percentHeight))
            height = parent.height * percentHeight/100;
    }

It doesn't take care of the case where you don't put a height.  In order to 
change
this, you'd have to make some changes to the FlowLayout class as well.

Original comment by terpcri...@gmail.com on 18 Aug 2008 at 8:38

[GoogleCodeExporter]

Hmmm... maybe that doesn't work.  I tried it yesterday and it was working fine, 
but
now today its having issues... I dunno.

Original comment by terpcri...@gmail.com on 20 Aug 2008 at 4:41

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

This is still an issue: It would be great if the component resized dynamically 
if it
needed to wrap

Original comment by writetof...@gmail.com on 11 Nov 2008 at 11:37

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Bah, thought i fixed this, actually i havent

Original comment by writetof...@gmail.com on 12 Nov 2008 at 1:40

[GoogleCodeExporter]

Original comment by dmcc...@gmail.com on 8 Jan 2009 at 5:45

• Added labels: FlexLib-FlowBox

[GoogleCodeExporter]

Further testing on my application shows that the height for the FlowBox is the 
exact
height required to contain all the child controls vertically. It appears that 
after
the children are flowed left-to-right, the height of the flowbox isn't adjusted.

Original comment by dan.r...@gmail.com on 23 Apr 2009 at 2:24

[GoogleCodeExporter]

Same problem occurs when the FlowBox is in a ViewStack. Looks like the 
ViewStack in 
unable to resize his content (when set to true) and some extras spaces are 
shown. 
Any idea of a solution?

Original comment by ti_da...@hotmail.com on 17 Jan 2010 at 7:57

[GoogleCodeExporter]

The workaround I am currently using for this bug is to check for the bottom-most
control inside the FlowBox, and manually resize the container as needed. It 
could be
more efficient if it was integrated into the control.

Trigger the following function on the updateComplete event from the FlowBox:

        protected function adapterFlowBoxUpdateCompleteHandler(event:FlexEvent):void
        {
            // resize the FlowBox manually, as the internal calculation doesn't work

            var fb:FlowBox = event.target as FlowBox;

            if (fb != null)
            {
                if (fb.numChildren > 0)
                {
                    // default the needed height to the top view metric

                    var maxBottom:int = fb.viewMetrics.top;

                    // Iterate over the children of the FlowBox to find the bottom-most bottom, so
                    // we can determine how big / small we can make the FlowBox. 
                    // If it's a UIComponent, include it if the includeInLayout property is true. 
                    // If it's not a UIComponent, include it if the visible property is true.

                    for (var idx:int = 0; idx < fb.numChildren; idx++)
                    {
                        var displayObject:DisplayObject = fb.getChildAt(idx);

                        if ((displayObject is UIComponent && (displayObject as
UIComponent).includeInLayout) ||
                            (!(displayObject is UIComponent) && displayObject.visible)) 
                        {
                            var thisBottom:int = fb.getChildAt(idx).y + fb.getChildAt(idx).height;

                            if (thisBottom > maxBottom)
                               maxBottom = thisBottom;
                        }
                    }

                    fb.height = maxBottom + fb.viewMetrics.bottom +
fb.getStyle("paddingBottom") + 1;
                }
                else
                {
                    fb.height = fb.viewMetrics.top + fb.viewMetrics.bottom;
                }
            }
        }

Original comment by dan.r...@gmail.com on 19 Jan 2010 at 2:31

[GoogleCodeExporter]

I'm using this in a VBox along with a form (height not set) and a tabnavigator
(height 100%) and this has fixed the issue for me. Cheers

Original comment by markoliv...@googlemail.com on 7 Apr 2010 at 8:42

[GoogleCodeExporter]

This issue seems to be around for some time now, and still happens with FlexLib 
2.5
for Flex3;

Original comment by pedro.ve...@gmail.com on 30 Apr 2010 at 2:38

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Ive used dan.rahn's solution and it works for me.

Original comment by cta...@gmail.com on 9 Nov 2010 at 12:45

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

dan's solution worked great for me too. thanks a lot.

Original comment by jaideepk...@gmail.com on 3 Jun 2011 at 10:35