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.
2 Answers
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.
Comments
You can use the methods setStyleName() and addStyleName() to set or add css styles to GWT UI objects.
1 Comment
brange
With those two methods you will add or set the StyleName, but not the primary style name. Which I needed to do to style the whole thing.