TabPanel width problem

[Snorkmaiden]

Hello all,

When adding a TabPanel to a div inside a GWT HTMLPanel, I'm finding that the width of the TabPanel does not get set to the width of the div, but a much greater width which forces the whole layout way over to the right.

A brief description of the layout is as follows - I've got an HTMLPanel with a table which has 2 columns. In the left hand column, there are 3 divs. The 3rd div is the problem one - it is an HTMLPanel with 2 divs.

If I set the TabPanel width to a fixed width, then this works ok. However, in this case I can't use a fixed width because I need the TabPanel to resize with the rest of the layout.

I have tried wrapping the TabPanel in a LayoutContainer which uses a FitLayout, but this exhibits the same problems.

I have also tried using a ContentPanel with a BorderLayout with just the center panel implemented, however I was not able to get this to work at all.

Example code as follows:

final String divId = HTMLPanel.createUniqueId();
final String contactId = HTMLPanel.createUniqueId();
final String paddingStyle = css.paddingLeft10() + " " + css.paddingBottom10() + " " + css.paddingRight10();
final HTMLPanel panel = new HTMLPanel("<div class='" + css.infoPanel() + "' id='" + divId + "'>"
+ "<div class='" + css.padding10() + "'><h5>Other Contact Details</h5></div>"
+ "<div class='" + paddingStyle + "'id='" + contactId + "'></div>"
+ "</div>");
final TabPanel tabPanel = new TabPanel();
Iterator<String> iterator = contacts.keySet().iterator();
while( iterator. hasNext() )
{
final String s = iterator.next();
final TabItem item = new TabItem(s);

final TempContact c = contacts.get(s);

final HTMLPanel contactPanel = new HTMLPanel("<div><table cellspacing='10'>"
+ "<tbody>"
+ "<tr><td>Telephone:</td><td>" + c.getTel() + "</td></tr>"
+ "<tr><td>Mobile Number:</td><td>" + c.getMob() + "</td></tr>"
+ "<tr><td>Address:</td><td>" + c.getAddress() + "</td></tr>"
+ "<tr><td>Email address:</td><td>" + c.getEmail() + "</td></tr>"
+ "</tbody></table></div>");

item.add(contactPanel);
tabPanel.add(item);
}
tabPanel.setAutoHeight(true);
tabPanel.setWidth("70%");
panel.add(tabPanel, contactId);

Does anyone have any idea what the problem is? Any help would be greatly appreciated.

Many thanks,

Helen

[sven]

If I set the TabPanel width to a fixed width, then this works ok. However, in this case I can't use a fixed width because I need the TabPanel to resize with the rest of the layout.

And this is the problem. You have to use a fixed size. If the other layout resizes, resize your TabPanel again