3 Replies Latest reply on Jul 5, 2006 5:02 PM by jpwrunyan

    How do you configure ScrollBar components?

    jpwrunyan Level 1
      For a custom component I have to separate the scroll bar from the content. In order to do this I am using the VScrollBar and HScrollBar components. However, when I set the scroll properties to what I think makes sense, I always get a really tiny scroll thumb. I think I just don't understand the logic for setting the scroll bars...
      for example, if I have content with width of 600 in an area of width 400, I set the HScrollBar's minScrollPosition to 0 and the maxScrollPosition to 200. But like I said the scroll thumb is tiny.

      here is a simplified example of what I want to do. I hope you can see what I mean about the tiny scroll thumb.

      Can anyone tell me how to fix this so it looks like a normal default scrollbar?

      <?xml version="1.0" encoding="utf-8"?>
      <!-- PopUpMenuButton control example. -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      xmlns:OQLControls="MXMLComponents.OQL.controls.*">

      <mx:Script>
      <![CDATA[
      private function doScroll():void {
      content.x = -hScroller.scrollPosition;
      }
      ]]>
      </mx:Script>

      <mx:Canvas width="400" height="400" horizontalScrollPolicy="off" verticalScrollPolicy="off">
      <mx:HBox id="content" width="600" height="400" backgroundColor="#3344EE" x="0" y="0">
      <mx:Label text="left" />
      <mx:Spacer width="100%" />
      <mx:Label text="left" />
      </mx:HBox>
      </mx:Canvas>

      <mx:HScrollBar id="hScroller" minScrollPosition="0" maxScrollPosition="200" width="400" scroll="doScroll()" />

      </mx:Application>
        • 1. Re: How do you configure ScrollBar components?
          peterent Level 2
          Have you tried specifying a height for the HScrollBar and a width for the VScrollBar? I see in the example that you have width set, but not height.
          • 2. Re: How do you configure ScrollBar components?
            Flex harUI Adobe Employee
            It appears that you need to specify pageSize="400". pageSize is the number of visible units (maxScrollPos + pageSize is the max unit). Width doesn't get factored into the calculations until layout time

            Don't forget, there are scrollbars built into Containers and ScrollControlBase
            • 3. Re: How do you configure ScrollBar components?
              jpwrunyan Level 1
              peterent - I have tried setting both width and height on ScrollBars in the past, I didn't for this example just to cut down on superfluous code. If you don't set it, it uses the default so there should be no problem....

              Flex harUI - the pageSize property did the trick! Thank you so much! I have no idea how I have been overlooking the property all this time...

              BTW, you're right, the above example does not technically *need* the scroll bar... it is a simplification of another custom component that, for layout purposes, does need the scroll bar to be separate.

              Again, thanks both of you for your help!