3

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 ?

muriloq
  • 2,692
  • 5
  • 29
  • 32

4 Answers4

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.

Hilbrand Bouwkamp
  • 13,509
  • 1
  • 45
  • 52
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.

Peter O.
  • 32,158
  • 14
  • 82
  • 96
Alexandre
  • 26
  • 1
0

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

rep_movsd
  • 6,675
  • 4
  • 30
  • 34
  • I removed the ScrollPanel, adding the FlexTable directly to the TabLayoutPanel. However, as the FlexTable grows with the new items added to it, the TabLayoutPanel height doesn't change. Do I have to call a specific method to layout the panel again ? – muriloq Apr 27 '10 at 18:57
-1

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);
}
Chris Boesing
  • 5,239
  • 3
  • 26
  • 30
  • It didn't work, probably because I'm using TabLayoutPanel, introduced in GWT 2.0, not TabPanel. Here's a thread discussing the same problem: http://www.coderanch.com/t/493012/Google-Web-Toolkit/Application-Frameworks/TabLayoutPanel-auto-height-grow-gwt – muriloq Apr 27 '10 at 20:52
  • Why not use the TabPanel instead? Isn't the only benefit of the *LayoutPanels that they are automatically attached to the RootPanel? – Chris Boesing Apr 28 '10 at 13:54
  • `TabPanel` won't work in `Standards` mode, only in `Quirks` mode. So you can't mix `TabPanel` with `FlowPanel` you have to use `TabLayoutPanel` which is apparently crippled in respect to the way it handles auto sizing at the browse level. –  Mar 14 '11 at 21:00