CODEWITHSUNDEEP
cssgwtuibinder
dermoritz
dermoritz

Reputation: 13001

gwt how to use setStyleName(String style, boolean add) - for a gwt standard widget

I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).

mItem.setStyleName("menuItemMarked", true);

with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.

But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)

update: what i tried is that. 

.menuItemMarked{background-color: yellow}

this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!

Upvotes: 0

Views: 9791

Answers (2)

Mikha
Mikha

Reputation: 291

Make sure you specify correct selector name in your css. In this case you need to have following:

.gwt-MenuItem.menuItemMarked {
    background-color: yellow;
}

Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.

Upvotes: 1

Danny Kirchmeier
Danny Kirchmeier

Reputation: 1134

Where are you specifying your CSS?

If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.

In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:

mItem.setStyleName(style.menuItemMarked(), true);

Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question

Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.

Upvotes: 4

Related Questions