CSS selector/inheritance in GWT UiBinder when using external stylesheet

Question

I am using GWT 2.4.0 + UiBinder.

In my ui.xml file i have referenced external style sheet using below line.

<ui:style
    type="com.codelaboration.twykin.frontend.widgets.qa.client.view.QABox.QAStyle"
    src="QABox.css" />

Now i have below code in the same ui.xml file

<div class="{style.imagePanel}">
      <div ui:field="lblUser"/>
</div>

In QABox.css i have defined the "imagePanel" and also used CSS inheritance for applying the CSS to all divs inside the imagePanel class:

.imagePanel {float: left; width: 100px; text-align: center;}
.imagePanel div {float: right; width: 530px;}

Now the problem is GWT is obscufacting the style name, so now imagePanel will be changed to some weird name, so the ".imagePanel div" wont going to work. So basically my question is how to use CSS selector in UiBinder when external stylesheet had been declared in ui.xml only.

Thanks.

Why wouldn't it work? GWT will also change the .imagePanel div selector to .obfuscated-imagePanel-whatever-it-is div. — Thomas Broyer
I had tried it but it didnt work. May be i was doing something wrong. I will again try, thanks for response. — vbjain

Dipesh Gandhi Dipesh Gandhi · Accepted Answer · 2012-04-19T19:33:04

you can add external css in your gwt application. you have to give the relative path to your style resource.

hear is the piece of code.

in your uibinder xml

<ui:style src="QAStyle/QABox.css" />

    <div class="{style.imagePanel}">
          <div ui:field="lblUser"/>
    </div>

it will find css in the QAStyle package.

or you can also use ClientBundle that will avoid your path problems. See Using an external resource.

it will help you.

CSS selector/inheritance in GWT UiBinder when using external stylesheet

1 Answers