4 Replies Latest reply on Dec 21, 2010 3:15 PM by Sible99

    skinned scrollbar thumb does not reach the bottom of the track

    Sible99

      I have an application in Flex 4.1 where there is a vertical List, bound to an array. As long as the List scrollbar is not skinned, everything is ok, the thumb oscillates from top to bottom of the track. But after adding a skin it works bad. The thumb never goes to the very bottom of the track when scrolling, but locks somewhere in between. For very long list of elements, it even stops halfway.

       

      Despite of this behavior, the list is in fact scrolled to the last element - so the problem is not with some elements at the bottom of the list being unreachable, but it is only about the thumb not reaching the bottom of the track, which looks as if the list was locked halfway. The skin is very simple and it is just about defining an image for the track and thumb. Is there any method to ensure that the thumb always goes to the bottom of the track, regardless list size?

        • 1. Re: skinned scrollbar thumb does not reach the bottom of the track
          flex2008 Level 3

          Can you post a sample for the skin you have used for scrollbars?

          • 2. Re: skinned scrollbar thumb does not reach the bottom of the track
            Sible99 Level 1

            I have 3 skins: for the scrollbar itself, for the track and for the thumb.Thumb and track skins are using fxg vector images, but exactly the same negative result is without fxg images, e.g. only using simple filled rectangles in place of the fxg - I just checked it.

             

            For Scrollbar:

            <?xml version="1.0" encoding="utf-8"?>
            <s:SparkSkin
                    xmlns:flex="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"   
                    minWidth="15" minHeight="35" alpha.disabled="0.5" alpha.inactive="0.5" >
                 <s:states>
                    <s:State name="normal" />
                     <s:State name="inactive" />
                    <s:State name="disabled" />
                </s:states>
                <s:Button id="track" 
                          focusEnabled="false" alpha="0.3"
                          skinClass="skins.VPhotoScrollbarTrackSkin" />
                <s:Button id="thumb"
                          focusEnabled="false" visible.inactive="false" alpha="0.5" left="-5"
                          skinClass="skins.VPhotoScrollbarThumbSkin" />
            </s:SparkSkin>

             

            For the thumb:

            <?xml version="1.0" encoding="utf-8"?>
            <s:SparkSkin
                xmlns:flex="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:fxg="fxg.*"
            >
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                    <s:State name="disabled" />
                </s:states>
                <fxg:thumb />
            </s:SparkSkin>

             

            For the track:

            <?xml version="1.0" encoding="utf-8"?>
            <s:SparkSkin
                xmlns:flex="http://ns.adobe.com/mxml/2009"
                         xmlns:s="library://ns.adobe.com/flex/spark"
                        xmlns:fxg="fxg.*"
            >
                <s:states>
                    <s:State name="up" />
                    <s:State name="down" />
                    <s:State name="over" />
                    <s:State name="disabled" />
                </s:states>
                <fxg:track  />
            </s:SparkSkin>

            • 3. Re: skinned scrollbar thumb does not reach the bottom of the track
              kevinklin Adobe Employee

              Try fixedThumbSize="true" on the VScrollBar. Also, it may help to add constraints to the fxg. For example:

               

              <?xml version="1.0" encoding="utf-8"?>
              <s:SparkSkin 
                  xmlns:flex="http://ns.adobe.com/mxml/2009" 
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:fxg="fxg.*"
              >
                  <s:states>
                      <s:State name="up" />
                      <s:State name="over" />
                      <s:State name="down" />
                      <s:State name="disabled" />
                  </s:states>
                  <fxg:thumb left="0" right="0" bottom="0" top="0"/>
              </s:SparkSkin>
              

               

              I would do the same for the track, to make sure that the sizes of each component is correct. The Scrollbar skin itself looks correct.

               

              -Kevin

              • 4. Re: skinned scrollbar thumb does not reach the bottom of the track
                Sible99 Level 1

                fixedThumbSize did the trick, thanks a lot!