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?

Solution 1

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

Solution 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...

Solution 3

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

Comments

[pr3sidentspence]

I don't believe so. Setting height to 100% indicates that you want it to use 100% of it's containers height, not to encompass 100% of it's own contents, just as 100% width fills all of the containers width.

[samsamara]

yes that's true - "depend on setting an explicit size on it, otherwise it will happily expand with the content you put in it"

[samsamara]

why do you need to wrap the ScrollPanel inside of a SimplePanel, instead of adding the ScrollPanel inside the TabPanel?