TabLayoutPanel with scroll

Question

I am using TabLayoutPanel in a GWT application attached to the RootLayoutPanel page.

Inside each tab there is a ScrollPanel, which is used to display the FlexTable.

Is it possible to increase the TabLayoutPanel vertically so that the user can scroll the entire page using the browser scroll bar, instead of using the internal ScrollPanel?

Answer 1

Just add a new style to the TabLayoutPanel:

this.addStyleName("tab-style-content");

And define in your CSS as:

.tab-style-content .gwt-TabLayoutPanelContent
{
overflow: auto;     
}

This way, the property overflowwill be overwritten in gwt-TabLayoutPanelContent, and the scroll bar will be shown automatically.

Answer 2

: LayoutPanel. : LayoutPanel , , , , , . , , . , LayoutPanels.

, , "" .

FYI , FlexTable , , Grid.

Answer 3

TabLayoutPanel , root, .

Answer 4

If I want to achieve something similar, I always put the TabLayoutPanel in the SimplePanel and add the SimplePanel to the RootPanel. I think this is not the best way, but it works.

public void onModuleLoad() {
   //Create TabPanel
   TabPanel tp = new TabPanel();
   tp.add(new HTML("Foo"), "foo");
   tp.add(new HTML("Bar"), "bar");
   tp.add(new HTML("Baz"), "baz");
   tp.selectTab(1);
   // Create SimplePanel and add TabPanel
   SimplePanel sp =new SimplePanel();
   sp.add(tp);
   // Add SimplePanel to the root panel.
   RootPanel.get().add(sp);
}