Search This Blog

09 February 2010

GXT: BorderLayout inside TabPanel

I had originally posted a bug in the GXT premium forum about BorderLayout not working inside a TabPanel.  To prove the point, I took the demo code directly from the site and put it verbatim inside a tab.

Since the post never showed up in the forum, I can't answer it myself so others know how to fix the problem... so it'll go here.

The BorderLayout code does the following:
Size size = target.getStyleSize();
int h = size.height;
b.y = h - totalHeight +;

Normally this would be fine.  However, when embedded within the TabPanel, I had used the following line from the Tab demo:

This is actually what was causing the problem.  With this set to true, the surrounding div didn't have an explicit height set and so was setting the y coordinate of the South region to 0-188+10.  Removing that one line caused everything to layout as expected.


  1. Thanks for that, it led me to find the solution. I did find however that merely setting setAutoHeight(false) on the TabPanel or the TabPanelItem did nothing. To fix it I just set my TabPanelItem to have a FitLayout and it all formatted neatly.

  2. Glad it helped. In my case, I had to use the BorderLayout, so I was unable to switch to FitLayout. I have actually come across a few other places where the autoheight or autowidth seem to cause layout problems as well.

  3. Hey Man,

    Came across your site via google search. I was beating my head against the wall trying to figure this out.

    setAutoHeight(true) fixed my problem!

    Thanks so much for sharing.