Re: Problems with overriding .gwt-TabBarItem-selected CSS when using own CSS style instead of .gwt-TabBarItem

You are adding the dependent name to the Label itself, this is not really what Jens was describing.

 

Your dependent style will look something like gwt-Label-lowerTabBarItem.  This is not how your style is written.  You should be able to see that the style name is not as you expected with something like firebug or IE's developer tools.

On Wednesday, July 10, 2013 3:58:47 AM UTC-4, Goosie wrote:

Hi Jens! :)

I've tried to used addStyleName() to create a secondary style class for the lower tab bar but with my usual luck it isn't working... ofc ;)

All the labels use .gwt-TabBarItem as their stylesheet :(

This are the following labels  in the java file:

        Label upLabel = new Label("this is a upper tab");

        /.../

        delistedLabel.addStyleDependentName("lowerTabBarItem");

        quotesLabel.addStyleDependentName("lowerTabBarItem");

And the following is in the style sheet:

.gwt-TabBarItem { background-color: green; }

.gwt-TabBarItem-lowerTabBarItem {!important; background-color: blue; }

On Monday, July 8, 2013 4:58:37 PM UTC+2, Jens wrote:

GWT has two kind of CSS classes: primary and dependent.

By calling setStyleName() you have replaced all CSS classes on the TabBarItem which your custom one. This makes your custom CSS class the new primary CSS class. When selecting a TabBarItem the implementation calls tabBarItem.setStyleDependentName("selected"). Now each TabBarItem contains class="<primary-css-class> <primary-css-class>-selected" which means you need upper/lowerTabBarItem-selected in your css file.

Instead of setStyleName() you could use addStyleName() which does not replace existing CSS classes and instead adds your custom class name to the element. You maybe need "!important" in your CSS then to make sure no one else overrides your CSS changes defined in your custom class name. That way the primary CSS class name is still "gwt-TabBarItem" and thus ".gwt-TabBarItem-selected" will work.

-- J.

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.