9 Replies Latest reply on Feb 7, 2012 3:44 AM by TTLogan

    Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)

    BobTheCoolGuy

      Just had a strange problem with scrollbars in my project not going all the way down to the bottom of their track.  I'm using on of the custom themes provided with Flash Builder - the CobaltGraphical theme.  The scrollbar functions properly sometimes but not others (for example, in a s:TextArea it does not work).  Luckily, it still scrolls to the bottom of the content, but the thumb is still a decent amount up on the track (about 1/3 of the way approx.)  If anyone has any idea why this would be happening I'd love to know!  I haven't been ble to isolate any reasons why yet.

        • 1. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
          kevinklin Adobe Employee

          Could you post some sample code showing the problem? Perhaps, the skin of the scroll bar?

           

          -Kevin

          • 2. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
            BobTheCoolGuy Level 1

            Sure thing:

            For example, the simplest case where it's not working properly in this list (no custom item renderer or anything):

             

            <s:List id="myList" enabled="{ready}" doubleClickEnabled="true" click="clickFunc()" doubleClick="doubleClickFunc()" height="90%" width="100%" dataProvider="{myData}" alternatingItemColors="{Looks.ALT_COLORS}"  labelFunction="myLabeler"/>
            

             

            As you can see below, all 10 items are showing, but the scroll thumb isn't nearly the whole way down and doesn't go further.  (Other cases it will make it most of the way down.)

            http://i54.tinypic.com/nbx5pj.jpg

            Here's the VScrollBarSkin:

             

            <?xml version="1.0" encoding="utf-8"?>
            <!--
            
            ADOBE SYSTEMS INCORPORATED
            Copyright 2009 Adobe Systems Incorporated
            All Rights Reserved.
            
            NOTICE: Adobe permits you to use, modify, and distribute this file
            in accordance with the terms of the license agreement accompanying it.
            
            -->
            <!--- The thumb and track skins are defined by the
            VScrollBarThumbSkin and VScrollBarTrackSkin classes, respectively. -->
            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                  minWidth="15" minHeight="35"
                  alpha.disabled="0.5">
                  
                <fx:Metadata>
                <![CDATA[ 
                /** 
                 * @copy spark.skins.default.ApplicationSkin#hostComponent
                 */
                    [HostComponent("spark.components.VScrollBar")]
                ]]>
                </fx:Metadata> 
            
                <s:states>
                    <s:State name="normal" />
                    <s:State name="disabled" />
                    <s:State name="inactive" />
                </s:states>
               
                <!--- Defines the skin class for the VScrollBarSkin's track. The default skin class is VScrollBarTrackSkin. -->
                <!-- when using custom theme set path to theme's skin MXML files: cobalt.skins.xxxSkin -->
                <s:Button id="track" top="16" bottom="15" height="54"
                          focusEnabled="false"
                          skinClass="cobalt.skins.VScrollBarTrackSkin"  />
                         
                <!--- Defines the skin class for the VScrollBarSkin's thumb. The default skin class is VScrollBarThumbSkin. -->
                <!-- when using custom theme set path to theme's skin MXML files: cobalt.skins.xxxSkin -->
                <s:Button id="thumb" 
                          focusEnabled="false"
                          skinClass="cobalt.skins.VScrollBarThumbSkin"  />
                
                <!--- Defines the skin class for the up button of the VScrollBarSkin. The default skin class is ScrollBarUpButtonSkin. -->
                <!-- when using custom theme set path to theme's skin MXML files: cobalt.skins.xxxSkin -->
                <s:Button id="decrementButton" top="0"
                          focusEnabled="false"
                          skinClass="cobalt.skins.ScrollBarUpButtonSkin" />
                
                <!--- Defines the skin class for the down button of the VScrollBarSkin. The default skin class is ScrollBarDownButtonSkin. -->
                <!-- when using custom theme set path to theme's skin MXML files: cobalt.skins.xxxSkin -->
                <s:Button id="incrementButton" bottom="0"
                          focusEnabled="false"
                          skinClass="cobalt.skins.ScrollBarDownButtonSkin" />
            
            </s:Skin>
            

            And here's VScrollBarThumbSkin:

             

            <?xml version="1.0" encoding="utf-8"?>
            
            <!--
            
            ADOBE SYSTEMS INCORPORATED
            Copyright 2009 Adobe Systems Incorporated
            All Rights Reserved.
            
            NOTICE: Adobe permits you to use, modify, and distribute this file
            in accordance with the terms of the license agreement accompanying it.
            
            -->
            
            <!--- The default skin class for the thumb of a Spark VScrollBar component.  
            
            @langversion 3.0
            @playerversion Flash 10
            @playerversion AIR 1.5
            @productversion Flex 4
            -->
            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
                
                <fx:Metadata>
                    <![CDATA[ 
                    /** 
                    * @copy spark.skins.spark.ApplicationSkin#hostComponent
                    */
                    [HostComponent("spark.components.Button")]
                    ]]>
                </fx:Metadata> 
                
                <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                    <s:State name="disabled" />
                </s:states>
            
                <s:Group right="2" left="2">
                    <!-- Layer 1: border -->
                    <s:Rect id="border" left="0" right="0" top="-1" radiusX="4" minWidth="11" minHeight="24">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0x426089" 
                                                 color.over="0x5C85B8" 
                                                 color.down="0x263852" 
                                                 alpha="1.0" />
                                <s:GradientEntry color="0x304663" 
                                                 color.over="0x43658F" 
                                                 color.down="0x2E4260" 
                                                 alpha="1.0" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                    <!-- Layer 2: innerBorder -->
                    <s:Rect id="innerBorder" left="1" right="1" top="0" bottom="1" radiusX="3">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0x557FB5" 
                                                 color.over="0x77B1D2" 
                                                 color.down="0x344E6D" 
                                                 alpha="1.0" />
                                <s:GradientEntry color="0x42628A" 
                                                 color.over="0x5C89B9" 
                                                 color.down="0x3E5A80"
                                                 alpha="1.0" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                    <!-- Layer 3: insetBorder -->
                    <s:Rect id="insetBorder" left="2" right="2" top="1" bottom="2" radiusX="2">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0x426089" 
                                                 color.over="0x426089" 
                                                 color.down="0x263852" 
                                                 alpha="1.0" />
                                <s:GradientEntry color="0x304663" 
                                                 color.over="0x304663" 
                                                 color.down="0x2E4260" 
                                                 alpha="1.0" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                    <!-- Layer 4: fill -->
                    <s:Rect id="fill" left="3" right="3" top="2" bottom="3" radiusX="1">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0x446690" 
                                                 color.over="0x446690" 
                                                 color.down="0x2B405C"
                                                 alpha="1.0"/>
                                <s:GradientEntry color="0x496C9A" 
                                                 color.over="0x496C9A" 
                                                 color.down="0x2F4563" 
                                                 alpha="1.0" 
                                                 ratio=".1"/>
                                <s:GradientEntry color="0x3D5A80" 
                                                 color.over="0x3D5A80" 
                                                 color.down="0x354D6F" 
                                                 alpha="1.0" 
                                                 ratio=".9"/>
                                <s:GradientEntry color="0x385275" 
                                                 color.over="0x385275" 
                                                 color.down="0x314867" 
                                                 alpha="1.0" 
                                                 ratio=".1"/>
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                    <!-- Thumb Icon DropShadow -->
                    <s:Group verticalCenter="0" horizontalCenter="0">
                        <s:Rect width="3" height="2" top="0">
                            <s:fill>
                                <s:SolidColor
                                    color="0x000000"
                                    alpha=".3"/>
                            </s:fill>
                        </s:Rect>
                        <s:Rect width="3" height="2" top="3">
                            <s:fill>
                                <s:SolidColor
                                    color="0x000000"
                                    alpha=".3"/>
                            </s:fill>
                        </s:Rect>
                        <s:Rect width="3" height="2" top="6">
                            <s:fill>
                                <s:SolidColor
                                    color="0x000000"
                                    alpha=".3"/>
                            </s:fill>
                        </s:Rect>
                        <s:Rect width="3" height="2" top="9">
                            <s:fill>
                                <s:SolidColor
                                    color="0x000000"
                                    alpha=".3"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>
                    <!-- Thumb Icon -->
                    <s:Group verticalCenter="-1" horizontalCenter="0">
                        <s:Rect width="3" height="2" top="0">
                            <s:fill>
                                <s:SolidColor
                                    color="0xAFAFAF"/>
                            </s:fill>
                        </s:Rect>
                        <s:Rect width="3" height="2" top="3">
                            <s:fill>
                                <s:SolidColor
                                    color="0xAFAFAF"/>
                            </s:fill>
                        </s:Rect>
                        <s:Rect width="3" height="2" top="6">
                            <s:fill>
                                <s:SolidColor
                                    color="0xAFAFAF"/>
                            </s:fill>
                        </s:Rect>
                        <s:Rect width="3" height="2" top="9">
                            <s:fill>
                                <s:SolidColor
                                    color="0xAFAFAF"/>
                            </s:fill>
                        </s:Rect>
                    </s:Group>
                </s:Group>
            </s:Skin>
            

            Finally, here's VScrollBarTrackSkin:

             

            <?xml version="1.0" encoding="utf-8"?>
            
            <!--
            
            ADOBE SYSTEMS INCORPORATED
            Copyright 2009 Adobe Systems Incorporated
            All Rights Reserved.
            
            NOTICE: Adobe permits you to use, modify, and distribute this file
            in accordance with the terms of the license agreement accompanying it.
            
            -->
            
            <!--- The default skin class for the track of a Spark VSlider component.  
            
            @langversion 3.0
            @playerversion Flash 10
            @playerversion AIR 1.5
            @productversion Flex 4
            -->
            <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                         xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
                
                <fx:Metadata>
                    <![CDATA[ 
                    /** 
                    * @copy spark.skins.spark.ApplicationSkin#hostComponent
                    */
                    [HostComponent("spark.components.Button")]
                    ]]>
                </fx:Metadata> 
                
                <s:states>
                    <s:State name="up" />
                    <s:State name="down" />
                    <s:State name="over" />
                    <s:State name="disabled" />
                </s:states>
            
                <!-- Layer 1: border -->
                <s:Rect id="border" left="0" right="0" top="-1" bottom="0" width="15">
                    <s:fill>
                        <s:SolidColor     color="0x496C9A" 
                                        color.over="0x496C9A" 
                                        color.down="0x496C9A"/>
                    </s:fill>
                    
                </s:Rect>
                <!-- Layer 2: Track Fill -->
                <s:Rect id="trackFill" left="1" right="1" top="-1" bottom="0" width="13">
                    <s:fill>
                        <s:LinearGradient>
                            <s:GradientEntry color="0xBABABA" 
                                             color.over="0xBABABA" 
                                             color.down="0xBABABA" 
                                             ratio="0"
                                             />
                            <s:GradientEntry color="0xE4E4E4" 
                                             color.over="0xE4E4E4" 
                                             color.down="0xE4E4E4" 
                                             ratio=".2"
                                             />
                            <s:GradientEntry color="0xE4E4E4" 
                                             color.over="0xE4E4E4" 
                                             color.down="0xE4E4E4" 
                                             ratio=".8"
                                             />
                            <s:GradientEntry color="0xBABABA" 
                                             color.over="0xBABABA" 
                                             color.down="0xBABABA" 
                                             ratio="1.0"
                                             />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
            </s:Skin>
            
            • 3. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
              kevinklin Adobe Employee

              Try removing the track's "height=54". You might have to create a copy of that skin to modify it.

              • 4. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
                BobTheCoolGuy Level 1

                Hmmm, didn't change anything.

                I just made a custom version and used it for the verticalScrollBar of the Scroller of the List.  Unfortunately, removing the height didn't seem to change anything (I did verify that the new skin was being used).

                • 5. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
                  kevinklin Adobe Employee

                  I see. Does this only occur using the cobalt skins? What happens if you use the default spark skins?

                  • 6. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
                    BobTheCoolGuy Level 1

                    Correct, it only happens with the colbalt skin.  I noticed something strange - with the Colbalt skin the thumb remains a static (small) size.  With the spark skin, it resizes depending upon the amount of content (as scrollbars normally do).  It may be that with the colbalt skin, the thumb is actually bigger, but the graphic for it is not resizing.  (For example, in the image I posted above, the thumb is actually extending all the way down to the bottom, but it just doesn't appear so.)

                    1 person found this helpful
                    • 7. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
                      kevinklin Adobe Employee

                      I think you found the issue. I'd reskin the thumb and add top="0" and bottom="0" to the first Group. This should force the thumb's graphics to resize with the thumb itself. Like this:

                       

                       

                      <?xml version="1.0" encoding="utf-8"?>
                      
                      ...
                      
                      <!--- The default skin class for the thumb of a Spark VScrollBar component.  
                      
                      @langversion 3.0
                      @playerversion Flash 10
                      @playerversion AIR 1.5
                      @productversion Flex 4
                      -->
                      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                                   xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
                          
                          ...
                      
                          <s:Group right="2" left="2" top="0" bottom="0">
                      
                      • 8. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
                        BobTheCoolGuy Level 1

                        Yep, that solved it - thanks!  As a side note, to make the border look correct, its bottom attribute must be set to 0 (this line of code is located right below the fix posted above):

                         

                        <!-- Layer 1: border -->
                                <s:Rect id="border" left="0" right="0" top="-1" bottom="0" radiusX="4" minWidth="11" minHeight="24">
                        

                         

                         

                        Also as a note for anyone reading this in the future, this bug was from the colbalt graphical theme included with Flex SDK 4.5.1.  I have no idea if similar themes, such as the Spark Colbalt theme have the same issue or not.

                        1 person found this helpful
                        • 9. Re: Scrollbars Don't Scroll all the way Down (Custom Theme/Skin)
                          TTLogan

                          I allso encountered a similar problem with the scroller component. When using dynamic content without preset size in some cases scrolling from the thumb arrow buttons does not work propperly, it gets stuck before or after such components. Mostly encountered this problem around when the scrolled container contained datagrids. Draging the scrollbar still works perfectly fine but using the thumb buttons it does not scroll all the way to the bottom or it gets stuck on the way.

                           

                          I encountered this problem with FLEX SDK 4.1 and did not depend on skin used. Behaviour was the same in all cases. Haven't found a sollution to this issue but i'm thinking on creating a custom scroller overiding its behaviour and incrementing the scrollposition with exact values instead it's "deltas" or whatever it's using.