Widget scrollbar styles

YohanBienvenue

Hi,

In default.css I saw there are selectors for changing the scrollbar style of both mx and spark controls.
This not only applies to FlexViewer but also all custom widgets that are added to the FlexViewer project.

But what if I design a new custom widget and I don't want the s|VScrollBar, mx|VScrollBar, s|HScrollBar and mx|ScrollBar selectors to apply to my widget. I want to use default looking scrollbars AND I can't change anything in default.css.

For spark controls a workaround is having another CSS file for this widget and re-apply the default skin on it, using something like this:

s|VScrollBar
{
   skinClass: ClassReference("spark.skins.spark.VScrollBarSkin");
}

But I'm not sure this is the best strategy, and I have no workaround for mx controls.

Any idea?

Thanks

YohanBienvenue

Yes you can override FlexViewer's CSS selectors in default.css by implementing your own CSS selectors in your widget. For spark controls I managed to restore the default Flex skin by specifying my own s|VScrollBar and s|HScrollBar selectors and skinClass attribute, thus overriding the FlewViewer one (i.e. com.esri.viewer.skins.VScrollBarSkin). However that won't work for mx controls, <mx:Tree> for instance.

FlexViewer's CSS selectors for mx controls, mx|VScrollBar and mx|HScrollBar is a bunch of Embed attributes:

mx|VScrollBar
{
    downArrowUpSkin: Embed(source="assets/images/arrow_down.png");
    downArrowOverSkin: Embed(source="assets/images/arrow_down.png");
    downArrowDownSkin: Embed(source="assets/images/arrow_down.png");
    upArrowUpSkin: Embed(source="assets/images/arrow_up.png");
    upArrowOverSkin: Embed(source="assets/images/arrow_up.png");
    upArrowDownSkin: Embed(source="assets/images/arrow_up.png");
    thumbDownSkin: Embed(source="assets/images/thumb.png");
    thumbUpSkin: Embed(source="assets/images/thumb.png");
    thumbOverSkin: Embed(source="assets/images/thumb.png");
    trackSkin: Embed(source="assets/images/track.png");
}

In my scenario I can't simply comment out those selectors in default.css, so assuming those selectors exist, how do I restore the default scrollbar look for MX controls in my widget?