Adobe Flex: Scrollable boxes

Question

If a dynamically sized (i.e. width100%) Box isn't big enough for it's content how to I get that box to becode scrollable instead of passing this resposiblity to it's parent. I'e I only want the box to become as large as there's space for it.

I.e. in the following example, if you resize your browser window so that the textboxes don't fit (heightwise), how do I get box1 to show scrollbars and not the entire application?

<?xml version="1.0"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">

    <mx:HDividedBox width="100%" height="100%">

        <mx:VBox id="box1" backgroundColor="green" height="100%" verticalScrollPolicy="on" clipContent="true">


            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

            <mx:TextInput width="200"/>

        </mx:VBox>

        <mx:Box backgroundColor="red" width="100%" height="100%">

        </mx:Box>

    </mx:HDividedBox>

</mx:Application>

I've tried with verticalScrollbarPolicy auto and on, but that didn't work.

Answer 1

The scrollbar doesn't kick in because it has enough space for all its child elements. The container's scrollbars appear when its height/width is too small for all the combined height/width of all its children. Here's a short example:

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" 
        verticalScrollPolicy="off">

    <mx:HDividedBox width="100%" height="600" verticalScrollPolicy="off">


     <mx:VBox id="box1" backgroundColor="green" height="100" 
                    verticalScrollPolicy="auto" clipContent="true">


            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

            <mx:TextInput width="100%"/>

        </mx:VBox>

        <mx:Box backgroundColor="red" width="100%" height="100%">

        </mx:Box>

    </mx:HDividedBox>

</mx:Application>

Answer 2

So you need to wrap the vbox in a canvas and set the vbox to have a relative height to its contents (by not setting a height property). For some reason it has to be a canvas and not another Box derivative. That way you get the effect you are trying to achieve.

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%" verticalScrollPolicy="off">

   <mx:HDividedBox width="100%" height="100%">

        <mx:Canvas id="box1" backgroundColor="green" height="100%" >

      <mx:VBox >
                <mx:Button width="200" />

                <mx:Button width="200"/>

                <mx:Button width="200"/>

                <mx:Button width="200"/>

                <mx:Button width="200"/>

                <mx:Button width="200"/>
            </mx:VBox>

        </mx:Canvas>

        <mx:Box backgroundColor="red" width="100%" height="100%" />
    </mx:HDividedBox>

</mx:Application>

Will try and come up with the reason it has to be a canvas. It feels right in my head but finding it hard to articulate. Will hopefull get you an explanation soon.