TabBar and width/height of tabbed area

Suite and Optimus Suite 5
#1

Hi folks,

Still fiddling around with TabBar, and getting better with it by the minute. Great-looking tool, I have to get acquainted with the rest of the DXH-products.

Now, I have some material that I want tabbed that have a clear width, but the height can vary. I tried with the following declarations in the wrapping div:

but nothing happened…oh, yeah, the whole tabbed area disappeared. Not what I wanted to happen.

Any trick for achieving a flexible height, or do I have to define a rigid value?

wonders mike

#2

HI
Here is a sample for you. See attaches.
tabbar_div_height.zip (34.3 KB)

#3

Hi,

Yes, thank you very much - it works like a charm! These tools are worth their weight on gold - good-looking and truly flexible.

And the support is friendly, even to those of us who don’t bother to read the documentation :slight_smile:

My other threads regarding the TabBar can be considered forgotten, since I changed the structure of my document.

Cheerio,

Mike

#4

You are welcome! )))

#5

is there a similar way to achieve the same result but from js?

I have a div container for the tabbar defined liek this

<div id="tabbar1" style="width:100%;height:100%;"></div>

and dataview container

<div id="data_container_1" style="width:100%;height:100%;"></div>

while in the js I attach DataView component to each tab

[code]var dvTabbar = new dhtmlXTabBar(“tabbar1”);
dvTabbar.setImagePath("…/codebase/imgs/");
dvTabbar.setSkin(‘dhx_terrace’);
dvTabbar.enableAutoReSize(true,true);
dvTabbar.addTab(‘dv1Tab’,’…’,’’);
var dv1Tab = dvTabbar.cells(‘dv1Tab’);

dvTabbar.setTabActive('dv1Tab');

data1 = dv1Tab.attachDataView({	
	container: "data_container_1",
	type: {
		template: "<div>#Table#</div><div class='dhx_strong' style='height:8px;'>#Name#</div><div class='dhx_light technical'>#TABLE_NAME#</div><div class='dhx_light technical'>#COLUMN_NAME#</div>",
		height:48,
		width:175
	},
	y_count: 2,
	height: "auto",
	width: "auto",
	drag:true
});[/code]

I need the content of each tab to be of a size of the DataView (in the above example data1 is 2 rows, but the other tabs have different DataViews attached each of different height.

#6

You can set onSelect event handler that will change tabbar size depending on selected tab:

tabbar.attachEvent(“onSelect”,function(id){
document.getElementById(“a_tabbar”).style.height = (id==“a1”?“300px”:“500px”);
this.adjustOuterSize();
return true
});

Also if you are using attachDataView method, you should remove “container” property from DataView config.

#7

Thanks Alexandra. Is there a way to get the height of the DataView view? In the example provided the values are fixed - in a real life the height depends on the window size, number of elements in the view etc. Is that something we can do with DataView and the Tabbar?

#8

Ok, I think that’s might be it…

I played with that thing for few hours and came out with the following set of settings

dvTabbar.setTabActive('dv1Tab'); dvTabbar.enableAutoReSize(true,true); dvTabbar.enableAutoSize(true,true);
Seems to work with both values (width and height) to be set to true for both AutoSize and AutoReSize functions.

Te important thing here is that setTabActive should be called BEFORE enabling auto sizing. If it is called afterwards, the active tab is incorrectly autosized :frowning:

Hopefully this may be a workaround for another poor soul like myself :wink:

#9

Perfect!

dvTabbar.setTabActive(‘dv1Tab’);
dvTabbar.enableAutoReSize(true,true);
dvTabbar.enableAutoSize(true,true);

Above settings work great, even for ajax-html loading. Thank you for that!