Styling normal html elements with UiBinder

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开发者_Python百科}">
            <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

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.

To use it like regular HTML, you got to think in regular HTML!

Lets take your case as example :

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

...

<div class="{style.redborder}">   <!--Notice I used class instead of styleName-->
  <g:Label>Hello,</g:Label>
  <g:Button ui:field="button" />
</div>

....

So just use "class" attribute instead of "styleName".