What is the right way to modify a GWT widget style in a specific context

Question

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?

Community · Accepted Answer · 2017-05-23 11:48:06Z

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.

edited May 23, 2017 at 11:48

CommunityBot

11 silver badge

answered Dec 16, 2011 at 17:54

Dusty Campbell

3,15631 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

danb Over a year ago

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...

Dusty Campbell Over a year ago

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.

danb Over a year ago

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....

Dusty Campbell Over a year ago

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.

danb Over a year ago

Ahhh got it. I'll try that out.

Collectives™ on Stack Overflow

What is the right way to modify a GWT widget style in a specific context

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related