TabLayoutPanel with scroll

Question

I'm using a TabLayoutPanel in a GWT application, attached to the RootLayoutPanel of the page.

Inside each tab I have a ScrollPanel, which is used to display a FlexTable.

Is it possible to make the TabLayoutPanel grow vertically, so 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;     
}

Thus, the property overflow will be overwritten in the gwt-TabLayoutPanelContent and the scrollbar will be shown automatically.

Answer 2

The short answer is: It's not possible with LayoutPanel's. The reason: LayoutPanel's are specific for applications that need to fill the browser client area, or in other words the part that is visible by the user. One of the problems with browsers is to have a widget that has exactly the height of the visible area and also automatically resizes when the browser window is resized. This is one of the problems the LayoutPanels solve.

If you want to use the browser scrollbar and be able to create pages longer than the visible area use the 'normal' Panels.

BTW just FYI you are aware the FlexTable is slow in rendering and if possible better use Grid.

Answer 3

If you make the TabLayoutPanel bigger than the root panel, you will get a browser scroll bar.

Answer 4

If I want to achieve something like this, I always put the TabLayoutPanel in a SimplePanel and add the SimplePanel to the RootPanel. I guess 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);
}