Question

I have a styledefinition defined with the style attribute in UiBinder.
Example:

<ui:style
    type="example.client.SomeClass.Style">

        .div1b {
            margin: 10px;               
        }
    </ui:style>
<g:HTMLPanel
    <g:Widget styleName="{style.div1b}" ui:field="widget">
    </g:Widget>
</g:HTMLPanel>

This style works fine in Google chrome, but in Firefox (and later IE) I want to use a different style. So I want to define another style for firefox.

Now as far as I get it, Google suggest creating a whole new class for the firefox style, and use a replace argument in the *gwt.xml. Something like:

<replace-with class="example.client.SomeClassFireFox">
    <when-type-is class="example.client.SomeClass" />
    <any>
        <when-property-is name="user.agent" value="gecko1_8" />     </any>
</replace-with>

Is this the correct way, or is there an easier one, where I just define a new Style inside UiBinder?

Regards,
Stefan

Answer 1

It’s actually easier than that: you can use @if…@else blocks in your ui:style, based on the user.agent property:

/* Use padding in Firefox and margin in other browsers. */
@if user.agent gecko1_8 {
   .div1b {
      padding: 10px;
   }
}
@ else {
   .div1b {
      margin: 10px;
   }
}

See http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#Conditional_CSS