TabPanel within TabPanel styling

Question

My app's layout consists of a TapPanel, which holds another TabPanel. I'd like to have the two TabPanels look differently. Following the GWT tutorial on applying styles I did the following:

TabPanel innerTabPanel= new TabPanel();
//carriersTabPanel.setSize("100%", "100%");
innerTabPanel.addStyleName("inner-tabPanel");


.gwt-TabPanel .inner-tabPanel{
    width: 100%;
    height: 100%;
}

This, however, did not have any effect whatsoever. Then I tried the following, but that didn't work either:

.inner-tabPanel{
    width: 100%;
    height: 100%;
}

So how I can style the two panels separately?

Answer 1

addStyleName will just cascade the new CSS Style Class on the element. Depending on how you have defined the CSS class, the new class may or maynot fully replace the original style.

If you intend to completely replace the default GWT styling for a widget instance with your style class, use setStyleName. This will replace all the current styles on the element with your new class.

If you need an in-between solution, use the setters from GWT Style wrapper, by invoking getElement().getStyle() on the widget.

Answer 2

Percentage values for width and height are relative to the parent, not the window. As w3schools notes, % "Defines the width in percent of the containing block".

If you want to see the effect of your rules, try setting the background-color or color CSS property instead. For instance, .inner-tabPanel { color: red} will set the color of the text in the inner tab panel to red, assuming there aren't any other conflicting rules. In this and all other CSS debugging situations, Firebug is the tool of first choice.