How to avoid multiple scrollbars when placing multiple lists in a vbox ?

Question

Hi All ,
Am using a flex application using flex builder 3 ...
I need to display multiple lists one below the other with no scroll bars for the list with only the outer scrollbar visible.
In other words , each list must display all of its children with no scroll bar. If i set the vertical scroll bar to "off" ,
it just removes the vertical scrollbar so that the user is not able to scroll the list (rest of the children are not visible)
I have attached a sample application to illustrate the problem I face right now....
When the following application is run ,
Present Behavior:
2 scrollbars are visible , the outer vbox scrollbar and the inner list scrollbar(for each scrollbar)
Expected Behavior:
1 scrollbar should only be visible ie. the outer vbox scrollbar.
Each list should display all of its children with no scrollbars.
Application code:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalScrollPolicy="off">
<mx:VBox  width="40%" height="600" verticalScrollPolicy="on">
   <mx:List dataProvider="{dataProviderArray1}" width="100%" />
   <mx:List dataProvider="{dataProviderArray2}" width="100%" />
   <mx:List dataProvider="{dataProviderArray1}" width="100%" />
       <mx:List dataProvider="{dataProviderArray2}" width="100%" />
       <mx:List dataProvider="{dataProviderArray1}" width="100%" />
       <mx:List dataProvider="{dataProviderArray2}" width="100%" />
</mx:VBox>
    <mx:ArrayCollection id="dataProviderArray1">
        <mx:source>
            <mx:Object label="A............" data="1"/>
            <mx:Object label="B............" data="2"/>
            <mx:Object label="C............" data="3"/>
            <mx:Object label="A............" data="1"/>
            <mx:Object label="B............" data="2"/>
            <mx:Object label="C............" data="3"/>
            <mx:Object label="A............" data="1"/>
            <mx:Object label="B............" data="2"/>
            <mx:Object label="C............" data="3"/>
            <mx:Object label="A............" data="1"/>
            <mx:Object label="B............" data="2"/>
            <mx:Object label="C............" data="3"/>           
        </mx:source>
    </mx:ArrayCollection>
    <mx:ArrayCollection id="dataProviderArray2">
        <mx:source>
            <mx:Object label="D............" data="3"/>
            <mx:Object label="E............" data="4"/>
            <mx:Object label="F............" data="5"/>
            <mx:Object label="D............" data="3"/>
            <mx:Object label="E............" data="4"/>
            <mx:Object label="F............" data="5"/>
            <mx:Object label="D............" data="3"/>
            <mx:Object label="E............" data="4"/>
            <mx:Object label="F............" data="5"/>
            <mx:Object label="D............" data="3"/>
            <mx:Object label="E............" data="4"/>
            <mx:Object label="F............" data="5"/>
        </mx:source>
    </mx:ArrayCollection>  
</mx:Application>

Answer 1

Hello,
If you know the length of dataprovider and can specify the height in pixels for each list, then below mentioned code may help:
     <mx:Canvas width="40%" height="100%" horizontalScrollPolicy="off">
        <mx:List id="l1" dataProvider="{dataProviderArray1}" width="100%" height="500"   />
        <mx:List id="l2" y="{l1.y + l1.height  + 5}" height="300" dataProvider="{dataProviderArray2}" width="100%" />
        <mx:List id="l3" y="{l2.y + l2.height  + 5}" height="300" dataProvider="{dataProviderArray1}" width="100%"/>
        <mx:List  id="l4"  y="{l3.y + l3.height  + 5}" height="300" dataProvider="{dataProviderArray2}" width="100%" />
        <mx:List  id="l5" y="{l4.y + l4.height  + 5}" height="300" dataProvider="{dataProviderArray1}" width="100%" />
        <mx:List  id="l6" y="{l5.y + l5.height  + 5}" height="300"  dataProvider="{dataProviderArray2}" width="100%" />
     </mx:Canvas>
Tanu