0

I have a widget BoxThing and it is styled with styles in ui:style

I have a BoxThingList widget that would like to slightly alter the style of all the child BoxThings.. but it seems like .boxthinglist > .boxthing {} isn't valid in ui:style.. Should I just do the style manipulation in code? or is there a better way to do this?

danb
  • 10,239
  • 14
  • 60
  • 76

1 Answers1

1

Try something similar to this.

Add a style name for the BoxThing widget using @external so that it doesn't get obfuscated. Then in BoxThingList.ui.xml change the style using the style name; again referring to it using @external so that it doesn't get obfuscated.

Community
  • 1
  • 1
Dusty Campbell
  • 3,146
  • 31
  • 34
  • Almost perfect... The styles in the widget don't get overridden by the parent styles... which makes sense given how css works.. so for some circumstances it looks like I'm still stuck with programatic style manipulation. It would be nice if !important worked in ui:style... – danb Dec 16 '11 at 18:24
  • In the BoxThingList add another style name to the elements and then use that to more specifically change the style in the UiBinder file. The more specific rule usually wins. – Dusty Campbell Dec 16 '11 at 18:53
  • It gets tricky when the default style is say a red border and the override wants to make it a blue border.. if I have two style names on the element with the border, the one set at the lowest level is going to win if I can't specify !important at the higher level... I think.... – danb Dec 16 '11 at 19:18
  • 1
    No, you can override by making a more specific rule. So, in the BoxThing I use say "boxwidget-border" class name. Then when I add BoxThings to my BoxThingList I also add the "boxwidget-thing" class name to all my BoxThings. Now I make a CSS rule ".boxwidget-border.boxwidget-thing { } ". Therefore the new rule is more specific and so overrides the default rule. – Dusty Campbell Dec 16 '11 at 21:12
  • Ahhh got it. I'll try that out. – danb Dec 17 '11 at 02:37