ViewStack height problem

Question

I have 2 VBox containers inside a ViewStack and the viewstack is inside HBox, I've set both the height and width of the vboxes to 100% and the same for the viewstack. My problem is that the viewstack does not display the whole content of the container childs only a part of it and displays a vertical scroll, although the width is stretched to fill the whole width of the container hbox, why doesn't the viewstack stretches to show the 100% height of its child and does it for the width only?

The main application contains the HBox which contains a module loader control which loads the module that contains the viewstack

Main Application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalScrollPolicy="on"
        xmlns:custom="components.*">
        <custom:RepeatingImage source="images/up_bg.gif" width="100%" height="100%" repeatX="true" repeatY="false" />
        <mx:Canvas width="100%">
            <custom:header id="header" />
            <mx:HBox id="content" horizontalGap="12" width="100%" x="12" y="180">
                <mx:ModuleLoader id="contentModuleLoader" width="100%" />                           
                <custom:sidead />
            </mx:HBox>
        </mx:Canvas>
        <custom:footer id="footer" />
    </mx:Application>

The Module:

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*" width="100%">
<mx:LinkBar dataProvider="stack" />
<mx:ViewStack id="stack" width="100%">
<mx:VBox id="Content" label="First View" width="100%">  
        <mx:Canvas width="100%">
            //controls here
        </mx:Canvas>

        <mx:Canvas width="100%">
            <mx:HBox width="100%">
                <mx:VBox width="100%">
                    //more controls and containers
                </mx:VBox>
            </mx:HBox>
        </mx:Canvas>
    </mx:VBox>

    <mx:VBox label="Second View">
 //controls
</mx:VBox>
</mx:ViewStack>
</mx:Module>

Answer 1

Have you tried with the resizeToContent property of the viewStack?

Answer 2

Agreed that it would help to see code, but it sounds like to me like the HBox may be the constraining UI element--make sure that its size is large enough to not require the scrollbar in the ViewStack.

You can often diagnose issues like this using backgroundColor and backgroundAlpha, or by pulling in FlexSpy or something similar.

Answer 3

why doesn't the viewstack stretches to show the 100% height of its child and does it for the width only?

I should have caught this yesterday. Setting anything to 100% makes it fit the parent container, not the children. I tried following your code and must admit I get lost in it. I'm pretty sure that the problem exists above your viewstack though (in the parent/children relationship, not necessarily in the code order)

Answer 4

Have you tried modifying the padding property?

Answer 5

There's an attribute "resizeToContent" in the ViewStack that you can set to true. That should do what you want.