CODEWITHSUNDEEP
cssgwtstyling
Nick Heiner
Nick Heiner

Reputation: 122620

Styling widgets with GWT: where to put style rules?

One of my widgets contain a programmatically generated list of ToggleButtons. I would like to style them, but I'm not sure what the best approach is. GWT provides rules like .gwt-ToggleButton-up and .gwt-ToggleButton-Down that I could override. I am able to override these by putting my rules in a style.css file and referencing it from my HTML file (although that approach is deprecated).

If I include the following in the UiBinder that contains the buttons, the styles aren't applied:

<ui:style>
  .gwt-ToggleButton-down {
      color: red;
  }

  .gwt-ToggleButton-up {
      color: red;
  }
</ui:style>

(I'm guessing that has to do with how GWT obfuscates CSS names.)

I could also make a new UiBinder component that just wraps ToggleButton to apply my own style rules, but that may be unnecessarily cumbersome.

Should I ignore the .gwt-ToggleButton-* rules entirely and define my own rules, applying them with toggleButton.addStyleName()? Or is another approach preferable?

Upvotes: 0

Views: 479

Answers (2)

Teja
Teja

Reputation: 11

You need to put all the styles into .css file which is located under war folder.

Upvotes: 0

dting
dting

Reputation: 39307

@external will prevent obfuscation if that's the route you want to go.

<ui:style>
  @external gwt-ToggleButton-down, gwt-ToggleButton-up;
  .gwt-ToggleButton-down {
      color: red;
  }
  .gwt-ToggleButton-up {
      color: red;
  }
</ui:style>

Upvotes: 1

Related Questions