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

[RhettZufelt]

I just modified my Legend widget and added this snippet:

<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   xmlns:esri="http://www.esri.com/2008/ags"
                   xmlns:viewer="com.esri.viewer.*"
                   initialize="basewidget_initializeHandler()"
                   widgetConfigLoaded="basewidget_widgetConfigLoaded()">
 
 <fx:Style>
  @namespace s "library://ns.adobe.com/flex/spark";
  
  s|VScrollBar
  {
   skinClass: ClassReference("com.esri.viewer.skins.VScrollBarSkin2");
  }
 </fx:Style>
    <fx:Script>
        <![CDATA[

This makes it look for VScrollBarSkin2 (make a copy of the skin and name it 2) for the Legend Widget specifically. Does not seem to affect any of the other scroll bars, just the widget that I included it in.

Not sure if this will cause "issues" down the line, or if a better method, but this seems to work.

R_

[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?