Resize tab label after changing label

Suite and Optimus Suite 5
#1

Hi,

I’m dynamically changing a tabbar label using setLabel(). This is working fine, but the width of the tab doesn’t change. If the user enters a new label that is longer than the first label, much of the text is cut off. Is there a way to resize the tab to match the label text after changing the label?

Thanks!

#2

Hi,

the current tabbar version doesn’t support such a functionality. However, you may use the following approach that is based on private property:

tabbar.setLabel(tabId,newLabel);
tabbar.adjustTabSize(tabbar._tabs[tabId]);
tabbar._setTabSizes(tabbar._rows[0]);

Also you should define the following css class:

.dhx_tab_element span{ white-space:nowrap }
#3

This solution seems to be a bit buggy:

  1. The Label gets bigger and bigger everytime i use the function
  2. There is a strange darker line under the Label

#4

Hi,

we are going to release the new version of the components 2.6 soon (in few days). setLabel will adjust tab width automatically.

#5

Hi.

You seem to have the same bug which occured when i programmed this function.
With close buttons tabs get bigger and bigger everytime you set label.

And size doesn’t seem to be reduced when short label is set after long label.

#6

Hi,

we have reproduced the problem. The fixed tabbar is attached (Standard edition).
dhtmlxtabbar.zip (12.3 KB)

#7

Can we use this item in our PRO version, too?

And where do i have to replace it for compilation with libcompiler (There is one in source and one in codebase)?

#8

Can we use this item in our PRO version, too?

Please create the ticket at support.dhtmlx.com/ to get the PRO library (standard doesn’t have all features those are included into pro edition).

You may also try to modify the existent dhtmlxTabbar/sources/dhtmlxtabbar.js (not compressed code) yourself:

locate the following method, line 488:

adjustTabSize:function(tab,size){
…
},

and replace it the following:

adjustTabSize:function(tab,size){ var a=this._getSkin(a); if (!size){ tab.style.fontWeight="bold"; tab.childNodes[3].style[this._dx] = tab.style[this._dx]="10px"; size=tab[this._s._vMode?"scrollHeight":"scrollWidth"]+10+(this._close?20:0); tab.style.fontWeight=""; } tab.style[this._dx]=size+"px"; tab._size=size; this._img_all(tab); },

And where do i have to replace it for compilation with libcompiler (There is one in source and one in codebase)?

You need to replace the file in codebase.