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.