Flex ScrollBars

Question

I have a problem displaying scrollbars for my Flex Application... I tried a basic very application with a canvas, but the scrollbars never appear on the browser window athough the canvas is much bigger than what can fit on the screen. Can someone please help? Here's my code:

    <?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">

    <mx:Canvas id="MyCanvas" height="2500" width="2000" verticalScrollPolicy="auto" 
    horizontalScrollPolicy="auto" backgroundColor="black" symbolColor="#000000"
    contentBackgroundColor="#080808"/>

    </s:Application>

Answer 1

Do you want the scroll bar in your canvas? Or in your main application? If you want scroll bars in your canvas, just add content that extends beyond the height and width of the canvas. It will "magically" add them, because that is way MX/Halo components role.

If you want scrollbars in your main application, you're going to have to add them manually, using a scroller component and a group. Conceptually 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">

<s:Scroller height="100" width="100">
 <s:Group width="100%" height="100%" clipAndEnableScrolling="true">
    <mx:Canvas id="MyCanvas" height="2500" width="2000" verticalScrollPolicy="auto" 
    horizontalScrollPolicy="auto" backgroundColor="black" symbolColor="#000000"
    contentBackgroundColor="#080808"/>

 </s:Group>

</s:Scroller>

    </s:Application>

In my experience you need to specify a fixed height and/or width on the scroller for the scroll bars to show up. Also be sure to clipAndenableScrolling on the group inside the scroller, or else the content will display beyond the scroller's viewport--which is kind of defeats the purpose.

Some good info from Adobe.

Answer 2

I got it to wrok just fine using the scroller/group around my applications mxml, i tried someone elses scroller skin def but it didnt work.

the main thing is to set all the heights and widths to 100% for the application, scroller & group.

<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"
           width="100%" height="100%>
<s:Scroller height="100%" width="100%" horizontalScrollPolicy="on" verticalScrollPolicy="on">
<s:Group left="0" right="0" top="0" bottom="0">
     <!--...mxml....-->
</s:Group>
</s:Scroller>
</s:Application>

Answer 3

In Flex 4+ (spark) you don't use "scrollPolicies" anymore. The MX canvas still does, so if your canvas contents grow beyond 2500x2000, they will scroll.

For your entire APP to have a scroller you need to create a skin for the Application and wrap the "contentGroup" in a tag.

See: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf62d75-7fff.html for more information on adding a scroller to a spark application