ScrollBar width in List based components

The default ComboBox component scrollbar buttons are tiny if you’re using a touchscreen. There’s no width property to make it any bigger. From my reading I have found that the scrollbar in the ComboBox drop-down isactually a List control which further has the ScrollBar component within it. So the hierarchy looks like this:

ComboBox
↓
List
↓
ScrollBar

The problem is that the ScrollBar inside the List component can’t be manipulated directly. So for an easy fix here’s what you do. Warning: Some art work required. Create skins for buttons (up/down), track (the portion behind the scroll thumb) and the thumb itself. The buttons have the states: up, down, over and disabled. Write some css for styling the List in the combobox as follows:

.customDropdown {
    vertical-scroll-bar-style-name:myCustomVertScroll;
}

.customVertScroll {
    up-arrow-up-skin:Embed(source="assets/upArrowUp.png");
    up-arrow-down-skin:Embed(source="assets/upArrowUp.png");
    up-arrow-over-skin:Embed(source="assets/upArrowOver.png");
    up-arrow-disabled-skin:Embed(source="assets/upArrowUp.png");

    down-arrow-up-skin:Embed(source="assets/downArrowUp.png");
    down-arrow-down-skin:Embed(source="assets/downArrowUp.png");
    down-arrow-over-skin:Embed(source="assets/downArrowOver.png");
    down-arrow-disabled-skin:Embed(source="assets/downArrowUp.png");

    track-skin:Embed(source="assets/scrollTrack.png");

    thumb-up-skin:Embed(source="assets/scrollThumb.png", scaleGridLeft="4", scaleGridTop="4", scaleGridRight="26", scaleGridBottom="26");
    thumb-over-skin:Embed(source="assets/scrollThumb.png", scaleGridLeft="4", scaleGridTop="4", scaleGridRight="26", scaleGridBottom="26");
    thumb-down-skin:Embed(source="assets/scrollThumb.png", scaleGridLeft="4", scaleGridTop="4", scaleGridRight="26", scaleGridBottom="26");
    thumb-disabled-skin:Embed(source="assets/scrollThumb.png", scaleGridLeft="4", scaleGridTop="4", scaleGridRight="26", scaleGridBottom="26");
}

Note that there the first css class us for the drop-down which exploits the style for the scrollbar.

Here’s some sample MXML on how to use it …

<mx:ComboBox id="combo" dropDownStyleName="customDropdown" width="200">
        <mx:dataProvider>
            <mx:String>Item 1</mx:String>
            <mx:String>Item 2</mx:String>
            <mx:String>Item 3</mx:String>
            <mx:String>Item 4</mx:String>
            <mx:String>Item 5</mx:String>
            <mx:String>Item 6</mx:String>
            <mx:String>Item 7</mx:String>           
        </mx:dataProvider>
    </mx:ComboBox>

Make sure the button, track and thumb skins are sized to an appropriate desired width. They must all be the same width atleast (for a vertical scroll bar). Its a dirty fix but works … Time to yell out to Adobe again I guess.

P.S. I was a bit lazy designing the skins, put in the effort and the results will be wonderful.