Hi All
Throughout my application I have elements that are set to
height="100%" width="100%".
These are often in a Vbox for example with other items like a label
and the 100% element scales to use 100% of the availiable space (i.e.
100% - label.height.
In one case I have the following:
<mx:VBox width="100%" height="100%" id="Vlayout" verticalGap="0">
<mx:HDividedBox width="100%" height="100%" id="Hlayout" horizontalGap="0">
<view:CompanyList />
<view:InterruptableTabNavigator width="100%" height="100%"/>
</mx:HDividedBox>
<view:SearchBar id="searchBar" height="0" visible="false" />
</mx:VBox>
On certain tabs of the tab navigator there is a transition to set the
searchBar height to non 0.
The problem is that as the search bar gets bigger the Hlayout box does
not get smaller. It still takes up 100% of the room and the search bar
gets pushed off the bottom of the page and you have to scroll to see it.
Tis worked fine with a normal HBox instead of the HDividedBox so I
think it might be a bug. It also works ok if I set horizontalGap to 5
instead of 0.
I've tried to get round this like this:
<mx:VBox width="100%" height="100%" id="Vlayout" >
<mx:HDividedBox width="100%" height="{Vlayout.height -
searchBar.height}" id="Hlayout" horizontalGap="0">
<view:CompanyList id="companyList" width="0" height="{Hlayout.height}"
/>
<view:InterruptableTabNavigator id="tabNavigator" width="100%"
height="{Hlayout.height}" /
</mx:HDividedBox>
<view:SearchBar id="searchBar" height="0" visible="false" />
</mx:VBox>
which does work ok for the transition but then when the browser window
is re-sized the contents does not re-size and you get scroll bars.
Is there a way around this?
Is there a bug?
Any help much appreciated.
