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>"
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'>"
+ "<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>"
Does anyone have any idea what the problem is? Any help would be greatly appreciated.