CODEWITHSUNDEEP
apache-flexlayoutmxml
sixones
sixones

Reputation: 1973

size the height of a flex component to fill the space available on stage

Im trying to create a layout in flex using mxml, the layout contains a Canvas component and a Box. The layout should always be such that the Box sits at the bottom edge of the application and has a fixed height, whereas the Canvas fills the remaining stage area and does not overlap with the Box.

My MXML is as follows;

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" clipContent="false" verticalGap="0">
    <mx:Canvas width="100%" height="100%" />

    <mx:Box width="100%" height="30"></Box>
</mx:Module>

I've tried using a dynamic binding to set the height on the Canvas (height="{this.stage.height - 30}") but it yields the wrong results.

Is there a simple way to achieve what I am after without setting the height using Actionscript?

Upvotes: 3

Views: 5456

Answers (3)

sixones
sixones

Reputation: 1973

I was able to use;

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" clipContent="false" verticalGap="0">
    <mx:Canvas bottom="30" left="0" right="0" top="0" />

    <mx:Box width="100%" height="30"></Box>
</mx:Module>

This solved my issue, as the Canvas would fill the space available up to the Box. Setting the bottom property to 0 on the Canvas, would cause it to expand past the Box and fill the entire stage.

Upvotes: 0

Theo
Theo

Reputation: 132972

<Module layout="vertical" xmlns="...">
  <Canvas width="100%" height="100%">
  <HBox width="100%" height="30"/>
</Module>

By setting layout="vertical" the Module will work more or less like a VBox. The Canvas is set to fill 100% vertical and horizontal, but space will be left for the HBox, because it has an explicit height.

Upvotes: 2

quoo
quoo

Reputation: 6307

I haven't used Modules much, but this works:

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    width="100%"
    height="100%"
    >
        <mx:Canvas left="0" right="0" top="0" bottom="0" />
    <mx:HBox 
        width="100%"
        height="50"
        bottom="0"
        >
             ....
    </mx:HBox>
</mx:Application>

Hope that helps!

Upvotes: 1

Related Questions