Geek Answers Handbook

SkinClass works in mxml but not in external css

I have a simple button in the mxml file, if I set the skinClass property in the tag itself, this works, however, if I set the skinClass property in an external css file, this does not apply to the button.

Works:

view.mxml

<s:Button id="btnRefresh" skinClass="skins.RefreshButtonSkin"/>

Does not work:

view.mxml

 <s:Button id="btnRefresh"/>

style.css

 #btnRefresh { skinClass: ClassReference("skins.RefreshButtonSkin"); fontSize: 12px; }

Does anyone know how I can make this css work?

Note. I can apply other styles to the button using css e.g. fontSize works

Edit: Additional Information

The button is nested in the actionContent part of my view

view.mxml

 <s:actionContent> <s:Button id="btnRefresh"/> </s:actionContent>

The css file is declared in my main mxml file

main.mxml

 <fx:Style source="style.css"/>

I am compiling for flex 4.5.1, this is a mobile application

+4
source share
4 answers

This would seem to be a bug in the ActionBar component. I tried the id selector ( #btnRefresh ), the class selector ( .btnRefreshStyle ), the component selector ( s|Button ) and the @Thembie clause.

I tried using skinClass and skin-class .

None of these functions work when the button is in the actionContent property of the actionContent component. But all this works great when moving a button into the View component.

So I'm afraid you are stuck in hard coding this skinclass. You may consider submitting a bug report.

+2
source

s | Button # btnRefresh {skinClass: ClassReference ("skins.RefreshButtonSkin");

}

0
source

defaults.css in the mobile theme has style rules for an ActionBar with a higher level of CSS specificity than the identifier selector you are using.

Short answer: use #actionGroup #btnRefresh as a selector.

Long answer: ActionBar has the following selectors for rules that support the defaultButtonAppearance style in a mobile theme:

 ActionBar Group#navigationGroup Button ActionBar Group#actionGroup Button ActionBar.beveled Group#navigationGroup Button ActionBar.beveled Group#actionGroup Button

They are designed to simplify the replacement of flat-screen buttons with buttons with beveled iOS features.

0
source

Jason was right, default.css in mobile theme redefines style s | Button # btnRefresh. To make your skin work, just make your style stronger, for example:

s | ActionBar s | Group # navigationGroup s | Button # btnRefresh {...}

0
source

More articles:


All Articles