Question

I have a GWT application with two TabPanels.
The TabPanel generates css-classes that has the prefix gwt-TabPanel.

Is there any way to change this prefix for one of the tables? I want to be able to style the two TabPanels independently.

Answer 1

To solve this I did:

Using setStylePrimaryName(String); This will change the prefix for the CSS class names that the TabPanel and TabBar uses.

tabPanel.getTabBar().setStylePrimaryName("myTabBar"); 
tabPanel.setStylePrimaryName("myTabPanel");

In your CSS file your add something like this:

.myTabBar {
}

.myTabBar .gwt-TabBarFirst {
  width: 5px;  /* first tab distance from the left */
}
.myTabBar .gwt-TabBarRest {
}
.myTabBar .gwt-TabBarItem {
  margin-left: 6px;
  padding: 3px 6px 3px 6px;
  cursor: pointer;
  cursor: hand;
  color: black;
  font-weight: bold;
  text-align: center;
  background: #3A3A3A;
}
.myTabBar .gwt-TabBarItem-selected {
  cursor: default;
  /* background: black; */
} 
.myTabBar .gwt-TabBarItem-disabled {
  cursor: default;
  color: red;
}
.myTabPanel {
}
.myTapPanel .myTabPanelBottom {
  border-width: 0px;
  overflow: hidden;
  padding: 6px;
}

For the second TabPanel you set a different with setStylePrimaryName() on both the TabPanel and the TabBar. Then you add a new section to the CSS file with the second primary name.