Adobe Flex 3: width and height specified in percentage not working for children of a viewstack

1
votes

I have a ViewStack which is dataProvider for a TabBar. There are two VBoxs as children for this ViewStack. It works fine with absolute values for width and height for these VBoxs, but when specified in percentages, the VBox uses all the available space (100%) for any percentage value. Please find the code and screen shots below.

Can someone please explain why it is getting rendered so? And also how can children of a ViewStack be aligned to center? There is no horizontalAlign property for ViewStack and it is not working with horizontalCenter= "0".

Code: 

<mx:ViewStack id="viewStack" width="100%" height="100%" selectedIndex="0" horizontalCenter="0" textAlign="center">

    <mx:VBox label="Tab 1" width="25%" height="10%" borderThickness="2" borderColor="red"
        borderStyle="solid" horizontalAlign="left">

        <mx:Text text="This is tab 1" />

    </mx:VBox>

    <mx:VBox label="Tab 2" width="30%" height="20%" borderThickness="2" borderColor="haloBlue"
        borderStyle="solid">

        <mx:Text text="This is tab 2" />

    </mx:VBox>

</mx:ViewStack>

Image 1(with absolute values): enter image description here

Image 2(with width="25%" and height="10%"): enter image description here

Thanks, Anji

2
apache-flexflex3adoberendering

2 Answers

2
votes

Simply use an outer container that fills the space (which is what you want in a view stack) and put your content inside. That outer container can center your inner content. Like this:

<mx:Box label="Tab 1" width="100%" height="100%" horizontalAlign="center">
    <mx:VBox  width="25%" height="10%" borderThickness="2" borderColor="red" 
              borderStyle="solid" >
        <mx:Text text="This is tab 1" />
    </mx:VBox>
</mx:Box>
0
votes

Please Refer the link

View Stack Container in that please read the

Sizing the children of a ViewStack container

by that U might get the clear Idea

If needed use another container inside the vbox

        ~~~ HappY Coding ~~~