0 Replies Latest reply on Sep 21, 2009 11:25 AM by nnmmooppqq

    List scrolling vs container scrolling

    nnmmooppqq Level 1

      I have the following structure:

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      <mx:HBox

       

       

      id="listContainer" width="95%" height="95%" styleName="contentTextBox" verticalGap="0" verticalAlign="top" paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="5"

      >

       

       

      <mx:VBox id="titleslist" height="95%" width="100%"

      >

       

       

      <mx:HBox id="titles" width="100%" horizontalAlign="right" horizontalGap="0" verticalAlign="bottom" verticalGap="0"

      >

       

       

      <mx:Spacer id="sp" width="70%"

      />

       

       

      <mx:HBox id="hrt1" horizontalAlign="center" width="10%" styleName="rhTextBox"

      >

       

       

      <mx:Text id="head1Text" text="first" selectable="false" width="100%"

      />

       

       

      </mx:HBox>

       

       

      <mx:HBox id="hrt2" horizontalAlign="center" width="10%" styleName="rhTextBox"

      >

       

       

      <mx:Text id="head2Text" text="second" width="100%"

      />

       

       

      </mx:HBox>

       

       

      <mx:HBox id="hrt3" horizontalAlign="center" width="10%" styleName="rhTextBox"

      >

       

       

      <mx:Text id="head3Text" text="third" width="100%"

      />

       

       

      </mx:HBox>

       

       

      </mx:HBox>

       

       

      <mx:List id="optionList" styleName="listItemTextBox"

      variableRowHeight="

       

      true" allowMultipleSelection="false"

      height="

      100%" width="100%" verticalScrollPolicy="auto"

      itemRenderer="

      customComponents.asmItemRenderer"

      paddingLeft="

       

      0" paddingTop="0" paddingBottom="0" paddingRight="0"

      scroll="checkRenderer()"

       

       

      />

      </mx:VBox>

       

      </mx:HBox>

       

      The function called on optionList.scroll is:

       

       

       

       

       

       

      public

       

       

      function checkRenderer():void

      {

       

       

      optionList.validateNow();

      }

       

       

       

      I am loading optionList dynamically. If the number of items does not cause a vertical scroll, everything work ok.

       

      When the number of items causes a vertical scroll, I get the following results:

       

      First load: The list component scrolls vertically, but the items that were not shown never show. E.g., If 8 items were shown with a vertical scroll, scrolling down still shows 8.

      Second load: The vertical scroll bar is on the VBox instead of on optionList. The scroll bar "works" in that all items in the list can be displayed, but there is a significant amount of extra space below the last item. When the list is scrolled back up and then back down, the "extra" space can be anywhere in the list.

       

      How do I get the list to scroll properly -- to show all the items in the dataprovider when the list is scrolled down? How to I keep the scrolling confined to the list itself rather than to it's container?

       

      Thanks!