Is there a way to set the minHeight of the scroll bar thumb in Flex 3

Question

In my project we needed to make the scollbars look like Windows scrollbars.

Therefore I have a thumbIcon on the thumb of a vertical scrollbar, but if I get too many items in the combobox, the scrollbar gets fiddly. This is because the margin between the thumbIcon and the border of the thumbSkin is too small.

Is there a way to set the minimum height of the thumbSkin so that I can ensure there is always a margin there and it always looks good, even if there are too many items?

Image above, see the thumb? By the thumbIcon I mean the 3 horizontal lines. The top and bottom margin between this icon and the border of the thumb itself is too small.

This is the normal scroll bar, the thumbIcon and the borders of the thumb have enough margin, which make the scroll bar look a lot better.

Answer 1

You should be able to extend (or if you feel really brave, edit) the ScrollThumb class, there's a minimum height setting in there of 10, which I agree is quite small.

Then you will want to extend the scrollBar class and set the style of the thumbUpSkin of to use that new extended ScrollThumb class.

Finaly you will want to extend your dropdown control to use the new extended scrollBar class.

I'd be more specific, but I'm not comfortable with extending classes and overriding stuff yet, maybe someone better at that will see my answer here and give a good code example.

There's an advantage to editing the class, in that you won't have to then extend all the other classes involved, but the disadvantage is that every ScrollBar in projects compiled on your SDK will use your new minimum height setting, and if it's compiled with a "pristine" SDK (maybe by a co-worker) it would be whatever the setting is in that SDK which could lead to some really difficult trouble-shooting in the future.

Answer 2

Here is the solution I found for enforcing a minimum size for the scroll thumb. I extended HScrollBar and VScrollBar and overrode the setScrollProperties method, to set the minimum size. Here is the HScrollBar version:

package your.package
{
import mx.controls.HScrollBar;
import mx.core.mx_internal;

use namespace mx_internal;

public class LargeThumbHScrollBar extends HScrollBar
{
    public function LargeThumbHScrollBar()
    {
        super();
    }

    public override function setScrollProperties(pageSize:Number,
                                        minScrollPosition:Number,
                                        maxScrollPosition:Number,
                                        pageScrollSize:Number = 0):void
    {
        super.setScrollProperties(pageSize, minScrollPosition, maxScrollPosition, pageScrollSize);

        if (scrollThumb) {
            scrollThumb.explicitMinHeight = 100;
        }
    }

}
}

For both HScrollBar and VScrollBar you set the explicitMinHeight (don't set explicitMinWidth in either version).

I'm not sure how to get the default scrollbars for a component to use the subclasses, though. I didn't have to tackle that problem because we were adding the scrollbars on ourselves. A quick google search didn't turn up any answers.

Answer 3

An alternative to overriding the classes is to get a reference to the the scrollThumb as a child of the ScrollBar.

        var scrollThumb:ScrollThumb = hScrollBar.getChildAt(2) as ScrollThumb;
        scrollThumb.minHeight = 50;

This is not ideal as it's dependent on the index of the ScrollThumb but I doubt that's likely to change and it's simpler than overriding the flex classes.