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 🙂

Advertisements

17 Responses to Skinning the Scrollbar in a ComboBox

  1. superabe says:

    Is there a way to change the scroll bar styles globally in a Flex 2 app., without having to specify it explicitly for each component ?

  2. raghunathrao says:

    very simple… set VScrollBar directly in the CSS, it gets applied to the whole app…

    VScrollBar {
    cornerRadius: 16;
    highlightAlphas: 0, 0;
    fillColors: #ab99ff, #cd33ff, #ef0000, #ffffff;
    trackColors: #000000, #ffffff;
    themeColor: #009dff;
    }

  3. ukw says:

    hi! i have one simple question.. how can i do this in flash? or its only for flex..?

  4. raghunathrao says:

    @ukw – This sure can be done in Flash. But my knowledge of flash is very limited.
    I’m a Java/C++ programmer converted to Flex. This should help you in your quest – http://www.kirupa.com/developer/mx/skinning_scrollbar.htm

  5. Catherine ANDRE says:

    Dear Sir,
    is it possible to override only the THICKNESS of a scrollbar (public static const THICKNESS:Number=16 in Scrollbar.as) ?
    thanks for a quick answer.

  6. Catherine ANDRE says:

    I am actually working with Flex.
    I have sucessfully skinned my scollbar, the problem is that i just want to reduce the thickness of the thumb.
    Here is the style (comments are in french, sorry…) :
    .myScrollStyle {
    borderColor: #000000;
    /* fond du scrollbar */
    trackDownSkin : Embed(“fonds/fd_scrollbar.png”);
    trackDisabledSkin : Embed(“fonds/fd_scrollbar.png”);
    trackOverSkin : Embed(“fonds/fd_scrollbar.png”);
    trackUpSkin : Embed(“fonds/fd_scrollbar.png”);
    /* onglet du scrollbar */
    thumbDisabledSkin : Embed(“boutons/bt_thumb.png”);
    thumbDownSkin : Embed(“boutons/bt_thumb.png”);
    thumbOverSkin : Embed(“boutons/bt_thumb.png”);
    thumbUpSkin : Embed(“boutons/bt_thumb.png”);
    thumbIcon : Embed(“boutons/bt_thumb.png”);
    /* fleche montante */
    upArrowDisabledSkin : Embed(“boutons/bt_arrow_up.png”);
    upArrowDownSkin : Embed(“boutons/bt_arrow_up.png”);
    upArrowOverSkin : Embed(“boutons/bt_arrow_up.png”);
    upArrowUpSkin : Embed(“boutons/bt_arrow_up.png”);
    /* fleche descendante */
    downArrowDisabledSkin : Embed(“boutons/bt_arrow_down.png”);
    downArrowDownSkin : Embed(“boutons/bt_arrow_down.png”);
    downArrowOverSkin : Embed(“boutons/bt_arrow_down.png”);
    downArrowUpSkin : Embed(“boutons/bt_arrow_down.png”);
    }

  7. Jose says:

    Thanks for the tutorial, is very interesting, but how can I change the scroolBar width in a comboBox?. Thanks

  8. jayalakshmi says:

    I tried to skin the scrollbar in TileList using skin image, but , I was not able to do so. I get the default scrollbar instead of my image. How to solve this problem. need an urgent reply.

  9. Mone says:

    Me too, I aqm looking for the way to change the width of scrollbar in Tcombobox.
    Anybody pls help

  10. Gregg says:

    I was able to change the width of the scrollbar. The scrollbar has a THICKNESS constant which is 16. The mx.skins.halo.ScrollArrowSkin has getters for this constant. I just skinned all four arrow skins with smaller images and my scroll bar’s width was determined by those images.

  11. Tom says:

    Hi, I have one question, if you know the response you are my saver!! How its possible to change the style dynamically of ScrollBar (same for AccordionHeader) ??

    I tried with getStyleDeclaration function from StyleManager but I have the felling that these Flex objects doesnt bind the style changements??

    Thanks a lot

  12. Tom says:

    Sorry, StyleManager.getStyleDeclaration(“VScrollBar”).setStyle(“cornerRadius”, 0); works (only if VScrollBar is already definied in a classic CSS), but for Accordion headers, this seems impossible to do because header are built when the accordion is built and header doesnt listen the changement of the style rule. Is it good ??

  13. css map says:

    CSS “Cascading Style Sheets” Lessons
    css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

  14. Niklas says:

    Hey, that’s great artcile, Just solved my problems with overiding the global scroll bar I made… Good stuff. Cheers.

  15. Ganga says:

    Hi,
    Useful tips and tutorials..

    How to change the color of the Scrollbar(I have changed its skin) when I select a color from Standard ColorPicker

    Note:
    I know this will work if we didn’t skin the Scrollbar

    (vs.getChildAt(i)as UIComponent).setStyle(‘backgroundColor’, cP.selectedColor);

    But how can i change its color If I skin the scrollbar

  16. Darren says:

    Hi,

    Very useful. Do you have any idea how to change the background colour of the input box on a combobox when editable is set to true?

    Many thanks
    Darren.

  17. dhanu says:

    I am facing a problem in flex.I have a combobox in my application,and when i am trying to scrolling the scroll bar of that combobox,it is closing the list.(It is not at all scrolling).Now i am not able to see the list of combobox,while scrolling.please provide a solution.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s