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…