gwt tablayout hides the tabs when increasing padding, font, margin

Question

I have created the TabLayoutPanel. If its

.gwt-TabLayoutPanel .gwt-TabLayoutPanelTabInner

CSS Class is modified with padding, say padding: 15px; or font-size: 25px;

then, the tabs hide with in the browser window. What is the reason and how to fix this?

Thanks, Bennet.

Answer 1

Just a guess (without seeing any code) but I bet you haven't added your TabLayoutPanel properly. The "Layout" panels are great but you you have to play by the rules.

Make sure that you have an unbroken link of "layout" type panels all the way down to the "RootLayoutPanel".

Also, verify that you are in fact using the "RootLayoutPanel" and NOT the "RootPanel" to add your gwt widget to the dom

RootLayoutPanel.get().add(myTabLayoutPanel);

See here, specifically the section titled "RequiresResize" and "ProvidesResize" http://www.gwtproject.org/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 2

.gwt-TabLayoutPanelTabInner is the wrapper around the label displayed in the actual tab. When you try to increase the padding (say padding : 'z'px;)what happens is it pushes the label by 'z' pixels from all sides and it eventually hides behind the enclosing div or the .gwt-TabLayoutPanel .gwt-TabLayoutPanelTabs. As a solution you can either adjust the padding so that it doesn't hide behind the parent div or increase the size of parent so as to allow the tabs take more padding.