I'm developing an application with Adobe Flex and AIR, and I've been banging my head against the wall trying to figure out how to solve a scrolling issue.
The basic structure of my main application window (simplified greatly) is this:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
paddingTop="0" paddingRight="0" paddingBottom="0" paddingLeft="0"
width="800" height="600" layout="vertical" verticalAlign="top"
>
<mx:VBox id="MainContainer" width="100%" height="100%">
<mx:Panel id="Toolbars" width="100%" height="25" />
<mx:HDividedBox width="100%" height="100%" >
<mx:Panel id="Navigation" minWidth="200" height="100%" />
<mx:VBox id="MainContent" width="100%">
<mx:Panel width="100%" height="200" />
<mx:Panel width="100%" height="200" />
<mx:Panel width="100%" height="200" />
<mx:Panel width="100%" height="200" />
<mx:Panel width="100%" height="200" />
</mx:VBox>
<mx:Panel id="HelpContent" minWidth="200" height="100%" />
</mx:HDividedBox>
<mx:Panel id="FooterContent" width="100%" height="25" />
</mx:VBox>
</mx:WindowedApplication>
The trouble is that the "MainContent" box might contain a huge list of subcomponents, and the presence of that long list causes a vertical scrollbar to appear at the highest level of the GUI, surrounding the "MainContainer" vbox.
It looks really silly, having scrollbars around the entire application window.
What I'm looking for instead is a solution where the scrollbar is only applied to the "MainContent" vbox (as well as the Navigation and HelpContent panels, if their content stretches past the window bounds).
I found a related question on StackOverflow, where the problem's solution was to use "autoLayout" and "verticalScrollPolicy" attributes on parent containers.
So I tried adding autoLayout="false" and verticalScrollPolicy="off" attributes to all of the parent containers, as well as verticalScrollPolicy="on" to the "MainContent" vbox. But the end-result of that experiment was that the content was simply clipped from the main container (and a useless scrollbar with no thumb was added to the MainContent vbox).
Anyone know how to solve this?
Found a solution.
Looks like the only way to prevent the VBox from aggressively extending its vertical space (and forcing its parents to grow scrollbars) is to wrap the VBox in a Canvas.
There's a handy little component here, called ScrollableVBox, which performs the workaround while taking care of a few bookkeping issues (like adding and removing children to the VBox, passing them around the Cavas wrapper).