GWT - Problems styling a TabLayoutPanel

Question

I want to implement a horizontal navbar using a TabLayoutPanel, using custom styling to fit my needs.

But I don't know how to override the default styling. Here's the UiBinder template:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
  xmlns:g="urn:import:com.google.gwt.user.client.ui">
  <ui:style>
    .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader {
      background-color: red;
      padding: 0;
      margin: 0;
    }
  </ui:style>
  <g:TabLayoutPanel barHeight="3.75" barUnit="EM">
    <g:tab>
      <g:header>Latest</g:header>
      <g:Label>Latest Activities</g:Label>
    </g:tab>
    <g:tab>
      <g:header>Patients</g:header>
      <g:Label>Patients</g:Label>
    </g:tab>
  </g:TabLayoutPanel>
</ui:UiBinder>

This doesn't work. But how can I reference the default styles?

Answer 1

attach a separate css i think - inline styles are for use with {style.xyz} in the same template. Actually there's a second solution. If you insist on having it in the ui.xml - use external scope: http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes

Answer 2

here's an example that works

http://code.google.com/p/salvadordiaz/source/browse/trunk/gwt-exception-handler/src/fr/salvadordiaz/gwt/client/BlocImage.ui.xml?spec=svn56&r=56

Answer 3

after some research i used the below approach and it worked...i am using GWT 2.5

/**the panel itself**/
.gwt-TabLayoutPanel {
    border: none;
    margin: 0px;
    padding: 0px;
}
/**the tab bar element**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs {
    background-color: #F4F4F4 !important;
}
/**an individual tab**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab {
    background-color: #6F6F6E !important;
}

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTab-selected {
    background-color: white !important;
}
/**an element nested in each tab (useful for styling)**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner {
    font-family: Arial !important;
}

/**applied to all child content widgets**/
.gwt-TabLayoutPanel .gwt-TabLayoutPanelContent {
    border: none;
    margin: 0px;
    overflow: hidden;
    padding: 15px;
}

Answer 4

<ui:style>
    @external onMouseOverBorderColor onMouseOutBorderColor;
    .onMouseOverBorderColor {border-color: red; border-style: outset}
    .onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>

Answer 5

If you want to see how GWT css file is declare:

1. Open gwt-user.jar
2. Find the package of the theme, ie: com.google.gwt.user.theme.clean for Clean Theme, and open public/gwt/clean/clean.css.
3. Find how .gwt-TabLayoutPanel and see how it's declared.
4. Make your own css file and declare it in the your_module.gwt.xml

You can change the theme if you want.

Answer 6

To elaborate on atamur's answer, the second option he suggests is really the better of the two, especially if all your other styles are set using UiBinder or client bundles. Basically, you add the following line below your initial <ui:style> tag:

@external .gwt-TabLayoutPanel .gwt-TabLayoutPanelHeader

The problem is that GWT is obfuscating the style rules you define in your UiBinder template. So when you write "gwt-TabLayoutPanel", that gets obfuscated to something like "GMDW0RHDH", which is then never applied to the elements of your TabLayoutPanel. Adding "@external" disables this obfuscation, and allows the styles in UiBinder to be applied as you'd expect.

Answer 7

Or you could simply add !important to your style definitions...