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

TabBar.addStyleDependentName("upper")

or

TabPanel.getTabBar().addStyleDependentName("upper")

or

TabBar.getElement().setId("upper")

or

TabPanel.getTabBar().getElement().setId("upper")

 

Maybe if you provide code you will get better help?  You are making us guess...

On Wednesday, July 10, 2013 4:03:26 AM UTC-4, Goosie wrote:

Hi Patrick!

I tried ur suggestion as well but couldn't find out how to get the two different tab bars to use their style. I tried giving one of them the default style but even then it would not change its color :(

On Monday, July 8, 2013 4:38:28 PM UTC+2, Patrick Tucker wrote:

Did you try giving the TabBar itself a style name like upper and lower?

 

This will allow you to do the following:

.gwt-TabBar-upper .gwt-TabBarItem   

.gwt-TabBar-lower .gwt-TabBarItem

http://www.gwtproject.org/doc/latest/tutorial/style.html#dependent

 

If you gave each element an ID you could reference them by the ID like so:

#upper.gwt-TabBar

#lower.gwt-TabBar 

 

On Monday, July 8, 2013 8:35:47 AM UTC-4, Goosie wrote:

Hi everyone!

We are designing a website which involves two tab bars, one at the top and one sub tab bar. For every label in the top tab bar we create a number of labels added to that one to create different sub tab bars.

Because of the fact that we started by rewriting old code, the tab bars originally was using style from .gwt-TabBaritem. Unfortunately, we had to avoid this use since we wanted the top tab bar and the sub tab bar to have different colors.

Instead we changed the style for every label in the tab bars with setStyleName. 

The problem now is, we can't get the ".gwt-TabBarItem-selected"-style to work since it seems like it's being "over written" by our new specified style sheets. 

Is there anyway to create stylesheets for a selected TabBarItem if the default .gwt style isn't used to begin with? Or can .gwt-TabBarItem-selected be customized so that it listens to our own styles?

An example of our tab bar item styles:

.upperTabBarItem {

    color: green;

    font-size: 10px;

    font-family:'Arial Regular', Arial, sans-serif;

    font-weight:bold;

    text-align:center;

    color: #FFFFFF;

    padding: 5px 10px 0px 10px;

    white-space: nowrap;

    float: left;

    height: 22px;

}

.lowerTabBarItem {

    color: blue;

    font-size: 10px;

    font-family:'Times New Roman', Arial, sans-serif;

    text-align:center;

    color: #000000;

    padding: 5px 10px 0px 10px;

    white-space: nowrap;

    float: left;

    height: 24px;

}

...and the selected style (which now does not work):

.gwt-TabBarItem-selected {

    cursor: default;

    background: white;

}

Thanks in advance,

Goose

--
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.