Auto set Height of the TabSet

[sauchin]

Hi

I have a problem with automatically setting height of the tabSet.

I am working on the application where the GUI has multiple tabs and some of the tabs are updated by AJAX and the height of the contents in the tab may change due to the variable data.

I am not able to find a way where I can auto adjust height of the tab. I do not want horizontal or vertical scroll bars in the tab. I would like tabs to auto adjust themselves in height/width so that no scroll bar (horizontal/vertical) appears. (Currently I have main problem with vertical bar)

To illustrate the issue, following is an example where contents of the tab2 are more in the height than the actual tab height and I get a vertical scroll bar which I want to avoid.

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.Side;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.HTMLPane;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;

public class SmartGWTLayoutTest implements EntryPoint {
	public void onModuleLoad() {

		 	Canvas canvas = new Canvas();
		 	TabSet applicationTabSet = new TabSet();
		 
		 	applicationTabSet.setTabBarPosition(Side.TOP);
		 	applicationTabSet.setTabBarAlign(Side.LEFT);
		 	applicationTabSet.setWidth(1230);
		 	applicationTabSet.setHeight(150);
		 	//applicationTabSet.setHeight100();
		 	//applicationTabSet.setOverflow(Overflow.VISIBLE);

		 	
		 	final Tab lTab1 = new Tab(); 
		 	lTab1.setTitle("Tab1");
		 	
		 	final Tab lTab2 = new Tab(); 
		 	lTab2.setTitle("Tab2");
		 	
		 	Label l1 = new Label("This is tab 1 contents");
		 	lTab1.setPane(l1);
		 	
		 	HTMLPane messagePane = new HTMLPane();
		 	messagePane.setContents("<font face='verdana' size='2px'> This is line one..." +
		 			"<br/><br/><br/><br/><br/><br/> this is line two <br/><br/><br/><br/><br/><br/> " +
		 			"This is line three</font>");
		 	
		 	lTab2.setPane(messagePane);
		 	
		 	
		applicationTabSet.addTab(lTab1);  
	        applicationTabSet.addTab(lTab2);
	        applicationTabSet.setPaneContainerOverflow(Overflow.VISIBLE);
	        canvas.addChild(applicationTabSet);  
	        
	        canvas.draw();
	}
}

Note: I tried applicationTabSet.setHeight100(), applicationTabSet.setOverflow(Overflow.VISIBLE), applicationTabSet.setPaneContainerOverflow(Overflow.VISIBLE); with no success.

My SmartGWT setup is as follows:
SmartGWT version: 3.0
Browser: Chrome 4 (its same issue in all browsers)

Thanks

[squally]

Hi sauchin,

not need to set tabset height

// applicationTabSet.setHeight(150);

and "force" you second tab height with

messagePane.setOverflow(Overflow.VISIBLE);

bye

[mike_mac]

I'm having issues with this as well ....

The above by squally is correct and is what we have for a while and works as expected in Firefox and IE but in Chrome, the pattern tabset is not resizing when a tab that is SMALLER is clicked on (I know this from the developer console, clicking on the patternTabSet indicates the outer window edge that hasn't resized). The pane container is adjusting to the smaller size but the outer tabset remains the same.

If the pane is larger, the window resizes to the larger size correctly, but it then remains at the largest size no matter which tab is selected.

I've attached a screen shot from the developer console that shows the structure of the window.

Again ... everything works as expected in firefox 10.0.2 and IE 9.0.5

Failing in Chrome 17.0.963.66
OS: Windows 7
SmartGwt: Latest nightly 3.0p

Code is as above ...

[eroberts]

Solution!

I think I found a solution to this.
You need to set the paneContainer to Overflow.Visible, as well as enable AutoHeight. The only problem is that the pane isn't constructed until a tab is added.

You can create your own addTab method that runs this code in the case that there are no other tabs.

addTab(newTab);
if (getTabs().length == 1) {
setPaneContainerOverflow(Overflow.VISIBLE);
VLayout paneContainer = getPaneContainer();
paneContainer.setHeight(1);
paneContainer.setAutoHeight();
}

If this still doesn't work, make sure that the TabSet and the Canvas's on the panes are also changing their height dynamically with similar code.