Skinning the Scrollbar in a ComboBox

Rajesh asked me this question today and I thought I’ll share with everyone…

I have done the following example using CSS that was generated from the Flex Style Explorer App

This is what this will achieve

This is how we can achieve it. We know that the dropDown on the ComboBox is actually a List. So if you can set the scrollbar onto the List and then set the List style onto the ComboBox, we are done.

• The style on List verticalScrollBarStyleName can be used to skin the List’s scrollbar
• Once this is done, use the dropdownStyleName style on ComboBox to style the dropDown List

As simple as that

Let’s look at the CSS now.

.myVScrollBar {
cornerRadius: 16;
highlightAlphas: 0, 0;
fillColors: #0099ff, #0033ff, #000000, #ffffff;
trackColors: #000000, #ffffff;
themeColor: #009dff;
}

.myList {
cornerRadius: 10;
verticalScrollBarStyleName: myVScrollBar
}

A CSS style declaration called myVScrollBar is used to skin the scrollbar (generated from the Style Explorer App). Another style declaration called myList is defined and here, as you see we nest the style declarations, by setting myVScrollBar to the verticalScrollBarStyleName style of the List.

Once this CSS file is saved (as say, test.css), just do the following to get this onto your App

< mx:Style source=”test.css”/>

<mx:ComboBox dataProvider=”{cards}” dropdownStyleName=”myList”/>

Enjoy

About these ads