2 Replies Latest reply on Mar 4, 2011 10:58 AM by Flex harUI

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

    tuliptaurus

       

      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>

        • 1. Re: How to avoid multiple scrollbars when placing multiple lists in a vbox ?
          Tanu Jain Level 2

          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

          • 2. Re: How to avoid multiple scrollbars when placing multiple lists in a vbox ?
            Flex harUI Adobe Employee

            I think you have to set rowCount on each list to the number of items in the

            dataProvider.