Styling normal html elements with UiBinder

Question

I have the following UiBinder code:

...
    <div>
        <g:Label>Hello,</g:Label>
        <g:Button ui:field="button" />
    </div>
...

Now I want to style the div element and lets say give it a red border. The clear way as far as I know is, to define a style attrinute like this:

    <ui:style>
    .redborder {
        border: 1px solid red;
    }
    ...

</ui:style>

so the code all in all would look like this :

...
        <div styleName="{style.redborder}">
            <g:Label>Hello,</g:Label>
            <g:Button ui:field="button" />
        </div>
...

but in the HTML page the red border isn't drawn. Now I looked into the page with Firebug (or how you call the thing in Google Chrome) and saw, that the div element has the correct class name, but the borwser can't find the class yet. If on hte other hand I put same style element to the button everything works fine.

Does anybody has an idea what it behaves like this?

Regards, Stefan

Answer 1

On regular DOM elements, your DIV in this case, there is no setStyleName() method, so just use the class attribute:

<div class="{style.redborder}"> ... </div>

styleName="..." works on GWT widgets because it is translated to call the setStyleName() method.

By the way, you might want to consider using addStyleNames="..." on your widgets as this allows you to add (multiple) CSS class names without accidentally dropping already existing class names.