I'm using GWT with UiBinder and I somehow can't manage to get the default CSS style rules to work correctly. So far, I've been successfully styling my components by assigning custom CSS class names, like this:
<ui:style>
.createButton {
background-color: red;
}
</ui:style>
<g:FlowPanel>
<g:Button styleName="{style.createButton}">Create</g:Button>
</g:FlowPanel>
But when using GWT's default CSS class names like in the following example, the style is not applied at all:
<ui:style>
.gwt-Button {
background-color: red;
}
</ui:style>
<g:FlowPanel>
<g:Button>Create</g:Button>
</g:FlowPanel>
I think that it could have something to do with the way GWT handles UiBinder class names. When I inspect the button in my web application with Firebug after setting the UiBinder stylename to {style.createButton}, it uses some kind of obfuscated class name:
class="GBMSFK0DJJ"
When I inspect it after not having assigned any class name at all, it says:
class="gwt-Button"
Although the button seems to have the right class name, the style I defined in the UiBinder style section is not applied. Am I missing something or is this a bug?
(In case you wonder why I don't just assign my own custom style name to the button: I'm actually trying to style TreeItems by using .gwt-TreeItem, but the button class is probably a nicer example.)
.gwt-Button
in your ui:style
will be obfuscated, and therefore won't be applied to a class="gwt-Button"
.
You have to mark it as @external
for it not to be obfuscated:
@external .gwt-Button;
.gwt-Button { background-color: red; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With