View Full Version : Problem with Scrollbars in TabItem's

13 Sep 2008, 11:01 AM
I've been trying to get some scroll bars working in a TabItem but not having any luck. I'm not sure if I'm fighting a bug with GWT or GXT or if i'm just missing something somewhere.

GWT v1.5.2
Ext GWT v 1.1.Alpha4
All Browsers

Basically I have a typical 3 pane design. A navigation pane on the left side, a list pane on the top and a details pane on the bottom. The details pane on the bottom houses a TabPanel which houses a series of TabItems.

Each TabItem contains a FlexTable. Each TabItem's flextable can have 1 to many widgets within it.

Now, if a TabItem's FlexTable has a lot of widgets ideally I want scroll bars to appear and allow the user to scroll both horizontally and vertically to see the rest of the widgets. If the browser is resized, OR, if the splitbar is moved to increase/decrease the lower details pane, ideally the scroll bars would adjust accordingly.
Bottom line, if there are more widgets then in the displayable viewing area I want scroll bars, if the displayable area can show all the widgets then no scroll bars. And finally, I need the scrolls bars to adjust based on the viewable area being adjusted by the user.

I've tried various parameter settings (SetSize, SetHeight, SetWidth, SetDeferHeight, SetAutoHeight, SetAutoWidth,etc) on various panels but not having any luck. The closest I can get is to use setSize("100%","100%"); on everything but this setting on the TabPanel causes the TabPanel to *never* resize when the browser or split bar is resized.
One reason why I think this might be a gxt bug is because panel.setSize("100%", "100%"); does NOT produce the same results as panel.setHeight("100%"); panel.setWidth("100%"); as I would have expected. When I use panel.setHeight("100%"); I get a panel with virtually no height at all. When I use panel.setSize("100%"); then the panel height is the size of it's container height. (of course this still doesn't solve my issue of scrollbars that dynamically adjust to the panel size.

I've stripped out all the server and data code to try and cut it all down to a single OnModuleLoad(). You can see the UI at this link. Note the everything looks great with the bottom tab's and scrollbars seems to look amd work great. Now resize the brower or move the horizontal split bar up and you see the problem. This is as close as I've been able to get it work the way I need it to.

This is the code that matches the UI your seeing in the above link:

publicvoid onModuleLoad() {

Viewport view = new Viewport();
view.setLayout(new FitLayout());
ContentPanel cpMain = new ContentPanel();
cpMain.setSize("100%", "100%");
cpMain.setLayout(new BorderLayout());
VerticalPanel vp = new VerticalPanel();
vp.setSize("100%", "100%");
Grid g = new Grid();
g.setSize("100%", "100%");
ContentPanel details = new ContentPanel();
details.setSize("100%", "100%");

TabPanel panel = new TabPanel();
panel.setSize("100%", "100%");

BorderLayoutData layoutData = new BorderLayoutData(LayoutRegion.CENTER);
details.add(panel, layoutData);

// Create First tab
TabItem tabItem = new TabItem();
tabItem.setSize("100%", "100%");
tabItem.setText("First Tab");
FlexTable table = new FlexTable();

int z = 0;
for( int i = 0; i < 10; i++)
for( int j = 0; j < 10; j++) {

table.setWidget(i, j++, new Label("TextBox" + ++z));

table.setWidget(i, j, new TextBox());

tabItem = new TabItem();
tabItem.setSize("100%", "100%");
tabItem.setText("Second Tab");
table = new FlexTable();

RadioGroup rg1 = new RadioGroup("group1");
RadioGroup rg2 = new RadioGroup("group2");

Radio rb1 = new Radio();
rb1.setBoxLabel("Choice 1");

Radio rb2 = new Radio();
rb2.setBoxLabel("Choice 2");

Radio rbA = new Radio();
rbA.setBoxLabel("Choice A");

Radio rbB = new Radio();
rbB.setBoxLabel("Choice B");

table.setWidget(0,0, new Label("Label1"));
table.setWidget(0,1, new TextBox());
table.setWidget(0,3, new Label("Label2"));
table.setWidget(0,4, new TextBox());

table.setWidget(1, 2, rg1);

table.setWidget(3, 0, rg2);


BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 200);
westData.setMargins(new Margins(5));

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(0, 6, 3, 0));

BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.CENTER);
eastData.setMargins(new Margins(5, 0, 5, 0));

BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 200);
southData.setMargins(new Margins(0, 6, 0, 0));

ContentPanel west = new ContentPanel(new FitLayout());

ContentPanel grid = new ContentPanel(new FitLayout());


ContentPanel south = new ContentPanel(new FitLayout());


ContentPanel east = new ContentPanel(new BorderLayout());
east.add(grid, centerData);
east.add(south, southData);

cpMain.add(west, westData);
cpMain.add(east, eastData);

RootPanel root = RootPanel.get();
root.setSize("100%", "100%");

Any help would be GREATLY appreciated!!!


15 Sep 2008, 11:50 AM
In case anyone is curious I managed to solve my own issue.

While I still think there is an issue with setSize("100%"); not producing the same results as SetHeight("100%") & setWidth("100%"), it apparently had nothing to do with my scrolling issue.
And yes I feel somewhat like an due to the unGodly amount of time I spent playing around with sizes. My actual issue revolved around not using a FitLayout on my details panel.
In the above code I just used a ContentPanel to create the details panel. In my real application my DetailsPanel extends ContentPanel. I basically added a super(new FitLayout()); to my DetailsPanel constructor and voila, scrollbars working as expected.

Anyway, hope this helps someone not waste nearly as much time as I did.