My custom style on ListBox is not applying? is it a browser issue with IE 7.0

Question

I've been trying to apply some custom style to my ListBoxes but the styles are not applying the following is the CSS

.gwt-ListBox{
 background: #fff;
 border: 1px solid #96CAEA;
}

I've inspected my code in IE and what i understad is instead of solid it is picking inset from Standard.css, I also tried using new css class like

.listBox{
 background: #fff;
 border: 1px solid #96CAEA;
} 

and this also giving same result what's wrong in my approach, Thanks,

Answer 1

GWT has concept of themes.

If you have inherited a Theme it will override your styles. Use firebug to find computed styles, stylesheets downloaded and styles applied. Once you see firebugs information it would be easy to fix it.

If would be easier to use clean theme in GWT if you need to do a lot of customization.

If you are using standard theme and are stuck with it. You would need to use !important tag in your .listbox stylename

.listBox{
 background: #fff;
 border: 1px solid #96CAEA !important;
}

The use of !important is considered a bit un-tidy or hackey approach :)

Answer 2

Try using the following to solve your border issue

border: 1px solid #96CAEA !important;

Answer 3

You can set a proprity of UIOBject to clear the ListBox Primary CSS theme and add your own theme like you want.

E.g

ListBox list = new ListBox();
list.setStylePrimaryName("listBox");

Property JavaDOC

"Sets the element's primary style name and updates all dependent style names."

Note: You need to add this css on your ui file, or you can create a CSSResource to referenciate your CSS file

interface ListBoundle extends ClientBundle{
    ListBundle INSTANCE = GWT.create(ListBundle.class); 

    interface ListBoxCssResource extends CssResource {
        String listBox();
    }
    @Source("package.listBox")
    @CssResource.NotStrict
    ListBoxCssResource css();
}

Then set the property pointing to the

String listBox();

like

ListBox list = new ListBox();
list.setStylePrimaryName(ListBoundle.ListBoxCssResource.listBox());

To use inside the UiBinder, you have to use the tag.

E.g

<ui:style>
    .gwt-ListBox{
          background: #fff;
          border: 1px solid #96CAEA;
    }
</ui:style>

<g:ListBox styleName="{style.gwt-ListBox}"/>

But using a external Resource work's better.

For more information read this