Flex 4 - s:Scroll

Question

I created a project which includes an mx:ViewStack as it's first container.

<?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:comp="mycomp.*"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           height="100%" width="100%"
           minHeight="600"  minWidth="800">
<s:layout>
    <s:VerticalLayout horizontalAlign="center" />
</s:layout><mx:ViewStack horizontalCenter="0"
              verticalCenter="0"
              id="contentVs"
              height="100%"
              width="100%">
    <s:NavigatorContent name="biography"
                        label="Biography"
                        width="100%"
                        height="100%">
        <comp:Biography />
    </s:NavigatorContent>
    <s:NavigatorContent name="collections"
                        label="Collections"
                        width="100%"
                        height="100%">
        <comp:Collections/>

In each s:NavigatorContent inside the mxViewStack I have a custom s:SkinnableContainer component. In these components I added a s:Scroller as the first child container.

   <?xml version="1.0" encoding="utf-8"?>
   <s:SkinnableContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark" 
                  xmlns:mx="library://ns.adobe.com/flex/mx"
                  width="100%" height="100%"
                  creationComplete="this_creationCompleteHandler(event)">
<s:Scroller id="scroller1"
            width="100%"
            height="100%">
    <s:Group>           
        <s:BorderContainer width="100%" height="100%" borderVisible="true">

Note that the application has 100% for both width and height.

Now when I decrease the size of the browser the scroller does not appear. In one of the s:NavigatorContent(always inside the ViewStack) cases the scroller appears.

I am puzzled why it does appear in one case only. If I set the policy to on the s:Scroller appears but it is disabled even if I make my browser pretty small.

Plus I can't seem to find a way to color these scrollers to black.

Thank you.

Answer 1

I replaced the relative size ont he Viewstack with a static(width="1200" height="800") size and that did the trick.

<s:Group width="100%" height="100%">        
    <s:Scroller width="100%" height="100%">
        <s:VGroup horizontalAlign="center">
            <mx:ViewStack horizontalCenter="0"
                          verticalCenter="0"
                          id="contentVs"
                          width="1200" height="800">
                <s:NavigatorContent name="biography"

Concerning changing color on the Scroller component I had to create my own skins.

A skin for the spark.components.Scroller and also:

VScrollBarSkin VScrollBarTrackSkin VScrollBarThumbSkin ScrollBarUpButtonSkin ScrollBarDownButtonSkin

the same goes for the HScrollBar...

Answer 2

I can't see exactly from your code sample, but this line:

<s:BorderContainer width="100%" height="100%" borderVisible="true">

makes it look like the content of the scroller's group has height="100%" set.

The scroller will only show a scrollbar if it's Group's content is either wider or taller than itself.

Try setting the group's width and height to 100% and ensuring that the content of the Group is taller than the Scroller.

eg.

<s:Scroller width="100%" height="100%">
    <s:VGroup width="100%" height="100%">

        <s:Label text="The rectangle below is very tall" />

        <!-- just a boring gradient rectangle -->
        <s:Rect width="200" height="1500">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="0xFFFF00" />
                    <s:GradientEntry color="0x00FFFF" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

    </s:VGroup>
</s:Scroller>