Scroll thumb is scrolling past the track skin boundary in Flex app (with screen shot and code)

Question

I created a custom scroll thumb in Flex but the scroll thumb is scrolling past the track skin. Check out this screen shot.

This is my code for the track skin, which essentially just makes it invisible so it appears to be rounded:

package com.project.skins
{
    import flash.display.DisplayObject;
    import flash.geom.Rectangle;

    import mx.skins.halo.ScrollTrackSkin;

    public class RoundedTrackSkin extends ScrollTrackSkin
    {
     public function RoundedTrackSkin()
     {
      super();
     }

     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
      // Fill track skin with zero alpha
         drawRoundRect(1, 1, unscaledWidth-2, unscaledHeight-20, 0, 0x000000, 0.0);
     }
    }
}

This is my code for the scroll thumb:

package com.project.skins
{
    import flash.display.GradientType;

    import mx.skins.Border;
    import mx.utils.ColorUtil;

    public class SimpleThumbSkin extends Border{

     public function SimpleThumbSkin(){
      super();
     }

     override public function get measuredWidth():Number{
            return 10;
        }

        override public function get measuredHeight():Number{
            return 10;
        }

     override protected function updateDisplayList(w:Number, h:Number):void{

      // User-defined styles.
            var borderColor:uint = getStyle("borderColor");
            var borderColorDark:uint = ColorUtil.adjustBrightness(borderColor, -50);
            var borderAlphas:Array = [1.0, 0.5];
            var backgroundColor:uint = 0x555555;
            var backgroundAlpha:Number = 0.3;

            var top_offset:Number = 3;

            graphics.clear();   

            // draw fill with alpha = 0.0 to capture mouse events
            drawRoundRect(1, 0, w - 3, h, 0, backgroundColor, 0.0);

      switch (name)
            {
                default:
                case "thumbUpSkin":{
                    drawRoundRect(0, top_offset, w - 1, h + 3, 3, [borderColor, borderColor], borderAlphas,
                        null, GradientType.LINEAR, null, null);
                    break;
                }

                case "thumbOverSkin":{
                    // border
                    drawRoundRect(0, top_offset, w - 1, h + 3, 3, [borderColorDark, borderColorDark], borderAlphas,
                        null, GradientType.LINEAR, null, null);  

                    break;
                }

                case "thumbDownSkin":{ 
                    // border
                    drawRoundRect(0, top_offset, w - 1, h + 3, 3, [borderColorDark, borderColorDark], borderAlphas,
                        null, GradientType.LINEAR, null, null);  

                    break;
                }
                /*
                case "thumbDisabledSkin":{
                    // positioning placeholder
                    drawRoundRect(
                        0, 0, w, h, 0,
                        0xFFFFFF, 0); 

                    // border
                    drawRoundRect(
                        1, 0, w - 3, h, 0,
                        0x999999, 0.5);

                    // fill
                    drawRoundRect(
                        1, 1, w - 4, h - 2, 0,
                        0xFFFFFF, 0.5);

                    break;
                }
                */
            }
     }

    }
}

Does anyone know how I can fix this?

Answer 1

Is there any reason why you have a scroll thumb appearing in your image when it appears like scrolling would not be necessary? It looks like the dropdown is large enough for all the elements. It also appears that you are adding 3 pixels to the passed height in the updateDisplayList function of your SimpleThumbSkin class. Additionally, you are setting the y value via your top_offest variable to 3. This seems to account for about 6 pixels extra, possibly the overlap you are seeing.