Handling browser resizing for multi-level tabset

[martintaal]

Hi,
I have a multi-level hierarchical tabset where each tab is a VLayout with a first member which shows some content (form) and a second member which is again a tabset (which again has tabs with a form and a tabset, etc.).

When resizing the browser to a smaller size I would like to always shrink the top section in the tab (or let it get a scrollbar), before the tabset below, so that when resizing the browser to a small size the user always sees all visible tab headers (of all levels).

I tried different settings (height as percentage, *, fixed, overflow) but I can't get it working. Below is the code which creates a hierarchical structure, when resizing the browser to a smaller size it is (hopefully) visible what I mean.

Do you have any ideas/tips in which direction I should be looking?

var MAX_LEVELS = 4;
createTab = function(name, index, level) {
	var tab = {};
	var newName = name + '.' + level;
	tab.title = newName;

	// create the toplayout with some labels
	var vLayout = isc.VLayout.create({minHeight: 0, overflow: 'auto', showResizeBar: false});
	for (var i = 0; i < 5 ; i++) {
		vLayout.addMember(isc.Label.create({contents: newName, height: 10}));
	}

	// and the pane itself
	tab.pane = isc.VLayout.create({height: '50%', width: '100%'});
	tab.pane.addMember(vLayout);
	if (level < MAX_LEVELS) {
		var tabSet = isc.TabSet.create({
  			tabBarPosition: "top",
			width: "100%",
  			height: "50%",
  			useSimpleTabs: true});
		for (var j = 0; j < 3; j++) {
			tabSet.addTab(createTab(newName + '.' + j, j, level + 1));
		}
		tab.pane.addMember(tabSet);
	}
	return tab;
}

var tabSet = isc.TabSet.create({
	tabBarPosition: "top",
	width: "100%",
	height: "100%",
	useSimpleTabs: true});
for (var j = 0; j < 3; j++) {
	tabSet.addTab(createTab('tab', j, 1));
}
tabSet.draw();

[Isomorphic_Paul]

Hi Martin,
It's not clear exactly what you're trying to achieve but it seems like you should be able to get the appearance you're after with some combination of fixed sizes, percentage sizes and minHeight settings.

If you can't seem to get there another approach would be to use only fixed sizes, and calculate them explicitly from the current page height (isc.Page.getHeight()) and have a page level resize event set to recalculate these sizes as necessary.