1 Reply Latest reply on Dec 30, 2011 12:08 PM by camel_case_rocks

    Move panel's vertical scrollbar to the left of the panel

    camel_case_rocks

      I have a panel skin with the following:

       

      <s:Scroller id="contentScroller" height="100%" width="100%" 
                       horizontalScrollPolicy="off" verticalScrollPolicy="auto">
          <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"/>
      </s:Scroller>
      

       

      For the life of me I can not figure out how to move contentScroller to the left of its container.

       

      I have tried setting contentScroller's x, y, top, left, bottom, right, height and width properties to various values but what I have in the snippet seems to be the only way to have it appear at all.

       

      Based on searching I tried this in the skin's script:

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
          super.updateDisplayList( unscaledWidth, unscaledHeight );
          if( contentScroller.visible ) {
              //contentScroller.verticalScrollBar.x = 0;
              contentScroller.verticalScrollBar.x = -contentScroller.verticalScrollBar.width;
          }
      }
      

       

      Neither of the lines in the if block make any difference as to where this thing renders itself.  Here is a screenshot of my panel:

      crap.JPG

       

      And here is what I'd like to accomplish:

      crap2.JPG

       

      Thanks for looking!

        • 1. Re: Move panel's vertical scrollbar to the left of the panel
          camel_case_rocks Level 1

          I found a solution.

           

          I removed the code from the script block and went back to a scroller in the mxml.

           

          <s:Scroller id="contentScroller" height="100%" width="100%" 
                           horizontalScrollPolicy="off" verticalScrollPolicy="auto">
              <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0"/>
          </s:Scroller>
          

           

          I figured I could adjust the vertical scrollbar by creating a skin based off of Scroller.  In the generated skin file I saw this:

           

          Scroller unconditionally sets its skin's layout to private layout
          implementation that handles the scroll policies.  Scroller skins can
          only provide replacement scrollbars.  The skin's layout and
          constraints or dimensions set on skin parts will not be honored.  To
          gain more control over the layout of a viewport and its scrollbars,
          instead of using Scroller, add them to a Group and use the ScrollBar component's
          viewport property to link them together.
          

           

          So I then changed my panel skin to look like the following:

          <s:Group left="0" right="0" top="0" bottom="0">
              <s:Group id="topGroup">
                  <!-- lots of stuff -->
              </s:Group>
              <s:VScrollBar id="verticalScroller" viewport="{contentGroup}" left="30" top="1" bottom="1" 
                            visible="true" alpha="0"/>
              <s:Group id="contents" left="46" top="0" bottom="0" right="0">
                  <s:layout>
                      <s:VerticalLayout gap="0" horizontalAlign="justify" />
                  </s:layout>
                  <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" clipAndEnableScrolling="true"/>
              </s:Group>
          </s:Group>
          
          

           

          Lastly I added the following to the script block to position the controls correctly:

           

          override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
              verticalScroller.left = topGroup.height;
              contents.left = verticalScroller.x + verticalScroller.width;
              super.updateDisplayList( unscaledWidth, unscaledHeight );
          }