How to relate the height of the Flex component to the height of the browser window?

Question

I want to limit the height of the flexible component to the height of the browser viewport.

Component children are populated from the database table using a repeater and are basic flags. They are enough that the flex application ends about twice as high as the screen height, which means that part of the rest of the layout becomes crappy on me. How can I force the component that contains them to limit the size of the viewport?

Answer 1

Setting component heights to 100% should be all you need.

in mxml:

<mx:Vbox height="100% />

in actionscript:

myVBox.percentHeight = 100;

, , , . , , .

Answer 2

minHeight minWidth 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>

Answer 3

, , Flex.

, Application.application.width Application.application.height

,

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

, , stage.addEventListener(Event.RESIZE, onStageResize)

Answer 4

:

ActionScript:

component.height = viewport.height;

MXML:

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