0

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?!

dermoritz
  • 12,519
  • 25
  • 97
  • 185
  • your code should not compile, as [no such signature exist for the `UIObject#setStyleName` method](http://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/user/client/ui/UIObject.html), what version of GWT are you using? – Eliran Malka Jul 06 '12 at 13:21
  • @EliranMalka GWT has had [`UIObject#setStyleName(String, Boolean)`](http://google-web-toolkit.googlecode.com/svn/javadoc/latest/com/google/gwt/user/client/ui/UIObject.html#setStyleName(java.lang.String,%20boolean)) since GWT 2.0. You are referencing version 1.6 of the docs. – Danny Kirchmeier Jul 06 '12 at 13:48
  • @DannyKirchmeier, thanks, my bad. it seems your CSS file is not linked to the application. open the developer tools and check to verify the file is fetched. – Eliran Malka Jul 06 '12 at 14:00
  • just for debug sake, put a space after the selector, i.e. `.menuItemMarked {background-color: yellow}`. – Eliran Malka Jul 06 '12 at 14:11

2 Answers2

4

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.

Community
  • 1
  • 1
Danny Kirchmeier
  • 1,134
  • 6
  • 14
  • thx - this is working. and it feels much better to set the name this way :-). (so it was more a gwt-question than a css question) – dermoritz Jul 09 '12 at 09:21
1

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.

Mikha
  • 291
  • 1
  • 4