How can I bind a flex component's height to the height of the browser window?

Question

I want to constrain the height of a flex component to the height of the browser viewport.

The component's children are populated from a database table using a repeater, and are basic checkboxes. There are enough of them that the flex app ends up being about twice the height of the screen, which means some of the rest of the layout goes crappy on me. How can I force the component that contains these to limit itself to the size of the viewport?

Answer 1

If I understand your question you want to get the size of the client area of the browser window which is the same as the size of your Flex app.

So, just use Application.application.width and Application.application.height

You should listen to the event that changes the app size and make a comparison like

if (component.width > Application.application.width)
     component.width = Application.application.width

The event would probably be stage.addEventListener(Event.RESIZE, onStageResize)

Answer 2

Setting the components height to 100% should be all you need.

in mxml:

<mx:Vbox height="100% />

in actionscript:

myVBox.percentHeight = 100;

if the contents of the component take up more space than available on screen the component should provide its own scroll bars keeping the component the same height. If this is not the case it would help if you posted code.

Answer 3

You can set you component to the height of the viewport say:

ActionScript:

component.height = viewport.height;

MXML:

<mx:component height={viewport.height} />

Answer 4

Set minHeight and minWidth for your container to 0:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
    <mx:HBox width="100%" height="100%">
     <mx:HBox width="20%" height="100%">
      <mx:Label text="Left Panel"/>
     </mx:HBox>
     <mx:VBox width="100%" height="100%" minWidth="0" minHeight="0">
      <mx:CheckBox label="1" />
      <mx:CheckBox label="2" />
      <mx:CheckBox label="3" />
      <mx:CheckBox label="4" />
      <mx:CheckBox label="5" />
      <mx:CheckBox label="6" />
      <mx:CheckBox label="7" />
      <mx:CheckBox label="8" />
      <mx:CheckBox label="9" />
      <mx:CheckBox label="10" />
      <mx:CheckBox label="11" />
      <mx:CheckBox label="12" />
      <mx:CheckBox label="13" />
      <mx:CheckBox label="14" />
      <mx:CheckBox label="15" />
      <mx:CheckBox label="16" />
      <mx:CheckBox label="17" />
      <mx:CheckBox label="18" />
      <mx:CheckBox label="19" />
      <mx:CheckBox label="20" />
     </mx:VBox>
     <mx:HBox width="20%" height="100%"> 
      <mx:Label text="Right Panel"/>
     </mx:HBox>
    </mx:HBox>
</mx:Application>