forcing a child component to resize itself larger than its container

Question

I am creating a component that displays a variable amount of "gauges" (square tiles of content if you will), that is laid out like so:

   <HDividedBox id="container">
    <VBox id="myComponent">
     <HBox id="header">
      ...header content...
     </HBox>
     <Tile id="body">
      ...gauges are added to the body...
     </Tile>
    </Vbox>
   </HDividedBox>

The body Tile has a horizontal direction. When I drag the HDividedBox to make myComponent smaller, the body component will get smaller as well, and eventually if there are too many gauges to fit horizontally, they will be bumped to the next row, and thus the smaller I make myComponent, the number of vertically stacked gauges grows.

This is all well and good. The problem is, no matter what combination of settings I use, I absolutely cannot get the body (a Tile) to size itself beyond the size of myComponent, which would ideally cause myComponent to scroll vertically. Even setting the maxHeight of the body to some huge value, it will never size itself larger than it's container.

Any ideas on how to accomplish this?

Thanks

Answer 1

If you force the height of your VBox or HDividedBox, then set the Tile scoll policy and keep adding components to it, you will see a scroll bar eventually

<mx:HDividedBox x="400" y="300" width="200" height="150">
    <mx:VBox width="100%" height="100%" >
        <mx:HBox width="100%" height="100%">
                        <mx:Button label="Header"/>
                        <mx:Button label="Header"/>
        </mx:HBox>
            <mx:Tile verticalScrollPolicy="on" width="100%">
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
            </mx:Tile>
    </mx:VBox>
</mx:HDividedBox>