GWT: Creating a scrollable FlexTable in a full-screen TabPanel

Question

I'd like to create a TabPanel that occupies the entire browser client area, and inside that put a FlexTable that scrolls if necessary. However, I'm having trouble acheiving this. I've tried:

public void onModuleLoad() {
 TabPanel test = new TabPanel();
 test.setSize("100%", "100%");

 FlexTable flex = new FlexTable();
 for (int i = 0; i < 100; i++)
  flex.setText(i, 0, "test " + i);

 test.add(flex, "tab");
 flex.setStyleName("overflow-auto");

 test.selectTab(0);
 RootPanel.get().add(test);
    }

Where overflow-auto is defined as:

.overflow-auto {
    overflow: auto;
}

Although the tab panel properly occupies 100% width, it ends up scaling its height to the interior FlexTable, rather than forcing scrollbars upon it. How can I make the client area of the tabpanel be independent of the size of its child here?

Answer 1

The problem is actually that the table is set to 100% width/height when you set it as a tab child. If you do that the overflow-auto has no more meaning since you allow the flex table to be 100% (of its contents).

overflow only works if you set the width/height using pixels.

Answer 2

You are probably going to need to use a ScrollPanel inside of that tab to get the effect you want. A ScrollPanel is a container that just takes a single widget and puts a scrollbar on it if needed. I should note that the ScrollPanel does, as far as I know, depend on setting an explicit size on it, otherwise it will happily expand with the content you put in it.

A caveat, however: There was a longstanding defect with any sort of scrollable panels inside of a TabPanel. Last I had seen it was still open.

http://code.google.com/p/google-web-toolkit/issues/detail?id=1343

I think the solution you'd be looking for here is to put the FlexTable into some other container panel like a VerticalPanel (possibly a SimplePanel would be enough), then put that into a ScrollPanel and finally shove that into the TabPanel.

As I noted though, a ScrollPanel will need you to manage the height of it manually. So, if you want it to remain the height of the window, this is going to involve writing some code that checks the browser size and figures out how tall the ScrollPanel needs to be. You'll need to attach a resize handler to the window as well to catch resizes and fix things then.

At least, that's the situation with avoiding the browser scrollbar for things as I see it right now. If I'm wrong, anyone, please let me know as I have code to delete...

Answer 3

It looks like GWT 2.0 has a new layout system that should do what I wanted: http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

Answer 4

What worked for me was similar to what bikesandcode wrote:

1. Create FlexPanel
2. Create a ScrollPanel and add the FlexPanel to it
3. Set the needed size of the ScrollPanel (using absolute CSS units)
4. create a SimplePanel and add the ScrollPanel to it
5. Add the SimplePanel to the TabPanel