Question

When I execute the following application, my Scroller stretches as far as the height of the inner group.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"> 
    <s:Scroller width="100%" height="100%" verticalScrollPolicy="on">
        <s:Group height="1400"/>
    </s:Scroller>
</s:Application>

Here is what I get:

I would like it to be the same size as my window is.
Could you please explain, what I am doing wrong? Why doesn’t Scroller serve as a viewport?

Answer 1

Generally you want to make the height/width of your scroller an explicit value and the height/width of the children a percentage. You’ve done that in reverse. So, like this:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"> 
    <s:Scroller width="100%" height="1400" verticalScrollPolicy="on">
        <s:Group height="100%"/>
    </s:Scroller>
</s:Application>

However, that doesn’t solve the problem of making the scroller/group the width of the available window. I would do that by sizing elements in the updateDisplayList() method.

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009"> 
<fx:Script>
  protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number:void{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    myScroller.width = unscaledWidth;
    myScroller.height - unscaledHeight;
    mySCrollingGroup.width = unscaledWidth 
    mySCrollingGroup.height - unscaledHeight;
  }
</fx:Script>

        <s:Scroller verticalScrollPolicy="on" id="myScoller">
            <s:Group id="mySCrollingGroup" />
        </s:Scroller>
    </s:Application>

You may want to tweak the sizing of the myScrollingGroup to accomodate for the scrollbars height/width. Or, you could use the precentHeight/percentWidth properties on the myScrollingGroup and set them to 100%.