Question

I am following this example in order to have scrollbars in my application
http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/

The difference is tha in my Application file I have a viewstack with three views. The only when the second view comes into display I need my Application to show Scrollbars but it doens’t. If I give my viewstack a fixed height the scrollbars appear but I don’t want to give a fixed width.

Thanks in advance.

Answer 1

From the Flex 4 SDK doc (link text):

“The default width and height of a ViewStack container is the width and height of the first child. A ViewStack container does not change size every time you change the active child.

You can use the following techniques to control the size of a ViewStack container so that it displays all the components inside its children:

1. Set explicit width and height properties for all children to the same fixed values.
2. Set percentage-based width and height properties for all children to the same fixed values.
3. Set width and height properties for the ViewStack container to a fixed or percentage-based value.

The technique that you use is based on your application and the content of your ViewStack container.”

To get around this you can add a scroller inside navigator contents. Code may look something like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:TabBar dataProvider="{myselfViewStack}"/>
    <mx:ViewStack id="myselfViewStack" left="0" right="0" top="100" bottom="0">
        <s:NavigatorContent>
            <s:Scroller width="100%" height="100%">
                <s:Group>
                    <!-- scrollbar not shown -->
                    <s:Group width="100%" height="100">
                        <s:Label text="1"/>
                    </s:Group>      
                </s:Group>
            </s:Scroller>
        </s:NavigatorContent>
        <s:NavigatorContent>
            <s:Scroller width="100%" height="100%">
                <s:Group>
                    <!-- scrollbar shown -->
                    <!-- Explicit height set in group to "simulate" content -->
                    <s:Group width="100%" height="1500">
                        <s:Label text="2"/>
                    </s:Group>      
                </s:Group>
            </s:Scroller>
        </s:NavigatorContent>
        <s:NavigatorContent>
            <s:Label text="3"/>
        </s:NavigatorContent>
    </mx:ViewStack>
</s:Application>