Flex fixed and variable height - can it be set in markup? - apache-flex

Question

I've got the following Flex application markup:
<app:MyApplicationClass
xmlns:app="*"
width="100%"
height="100%"
layout="vertical"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<mx:VBox id="idPageContainer" width="100%" height="100%" verticalGap="0"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2">
(top menu stuff goes here)
</mx:HBox>
<mx:HBox id="idBottomContainer" width="100%" height="100%" verticalScrollPolicy="off" clipContent="false">
(page stuff goes here)
</mx:HBox>
</mx:VBox>
</app:MyApplicationClass>
When I run it, it displays top panel with a fixed height, and a bottom panel with variable height. I expect the bottom panel's height to contain the remaining height, but it somehow overflows off-page.
The only way I found to fix this height issue (so far) is to programmatically set the height to be fixed instead of variable:
<mx:HBox id="idBottomContainer" width="100%" height="700" verticalScrollPolicy="off" clipContent="false">
(page stuff goes here)
</mx:HBox>
And code-behind:
package {
import mx.containers.HBox;
import mx.core.Application;
import mx.events.ResizeEvent;
// (...)
public class MyApplicationClass extends Application {
public var idBottomContainer:HBox;
// (...)
private function ON_CreationComplete (event:FlexEvent) : void {
// (...)
addEventListener(ResizeEvent.RESIZE, ON_Resize);
}
private function ON_Resize (event:Event) : void {
idBottomContainer.height = this.height - idTopContainer.height;
}
}
}
But this solution is too "dirty" and I'm looking for a more elegant way. Does anyone know an alternative?

Answer 1

Seems to me what you have ought to work. I have something similar working in countless screens. But if you're really stuck you could try to replace the VBox with a Canvas and do something like this:
<mx:Canvasid="idPageContainer" width="100%" height="100%" verticalGap="0"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2">
(top menu stuff goes here)
</mx:HBox>
<mx:HBox id="idBottomContainer" width="100%" top="{idTopContainer.height}"
height="{idPageContainer.height - idTopContainer.height}"
verticalScrollPolicy="off" clipContent="false">
(page stuff goes here)
</mx:HBox>
</mx:Canvas>