Tabbar - how to increase the height of the bar title on top

Im looking at tabbar, it’s really cool & flexible. just wonder how to increase the height of the tab bar title, as now it’s a bit tight.

Second question is , I know that the tab bar width could be initialized as:
tabbar.addTab(“reporthome”, “Report Overview”, “150px”);
and also could be updated as:
tabbar._tabs[1].style.width = ‘200px’;
what I want to achieve is like IE tab behaviour: tab has max&min width,
first few tabs are created with max width, once it takes full width of the window bar, all tabs squeeze until min width reaches, then tab scroll buttons appear.
to achieve this with dhtmlx tabbar:
create few tab with max width (no problem, tabbar.addTab() can achieve)
second thing is to handle the event onTabScrollAppear, to squeeze all tabs until min width (tab scroll shouldnt appear at this point, will be stopped by decreasing all tabs’ width). then let tab scroll button appear. when tabs are closed, need to handle onTabScrollDisappear, to widen tab width until max width.

My quesion is is there such onTabScrollAppear / onTabScrollDisappear event handler ?
or equivalent approach to achieve the IE tab behaviour ?

Any help will be really appreciated.



  1. height:
    tabbar=new dhtmlXTabBar(“tabbar_”+ind,“top”, 40);
  2. width:
    Unfortunatelly, there is no such implementation

thanks for your reply,

for the second question, Im trying to do it manually.
but after decrease tab width

for (var tab in this.tabbar._tabs) {
this.tabbar._tabs[tab].style.width = this.tabWidth + ‘px’;

all tabs looks smaller, but when actually select an tab, its width changes to its original width by itself, is this a bug ?

in html code, seems it’s outside div & bg div still keep the original width.

any solution to this ?


also tried to set the width of the bg img div:
ReportTabs.tabbar._tabs[1].childNodes[3].style.width = ‘100px’;

but still on select of that tab, it goes back to its original width.

tried this too: this.tabbar._tabs[t]._size

but it wont update exist tabs’ width.

Try to use method getAllTabs() to get all the tabs and iterate them.
There is a method getLabel(tab) - you can get an ‘old’ tab and set a new label my method setLabel(id,text,width), where you can varify the 3th parameter.

Thanks very much, that worked well.

Is there anyway to set the first tab without close button, but the rest are with close button ? and make the first tab not in the scroll list (always visible) ?

tabbar.addTab(“tab1”,“Tab 1”,“100px”);
tabbar.addTab(“tab2”,“Tab 2”,“100px”);
tabbar.addTab(“tab3”,“Tab 3”,“100px”);
tabbar.addTab(“tab4”,“Tab 4”,“100px”);
tabbar.addTab(“tab5”,“Tab 5”,“100px”);
There is no such implementation, but may be i’ll give you some way of using it.

So, about the second point:
you can use something loke in my attached sample.
I used the window there (as a container to load content) - you can attach your content there using different methods. But you can use a div as in the sample here: … 5_all.html

So my approach consists of some points:

  1. you can pain your special button (it can be the same view as tab) and position it in the div.
  2. in same you put tabs area with little offset for this button
  3. use window, layout, div (any container you want) to load your content by event handlers ‘onClick’ or ‘onSelect’ of tabbar.

I was able to make the IE tab behaviour that I mentioned above, and works beautifully with many browsers that I wanted, but one issue here, when with many tabs open (min tab width & scroll buttons present), if current active tab position is the last one, and I keep close tabs from the end,
the scroll bar seems not getting adjusted automatically, what happened was many tab hidden in the left with min width (still many tabs, not increasing tab width yet) and there are blank space between the last tab and the scroll right button.

tried to use
this only makes the active tab in view, but not adjust the scroll buttons.
is there any function that i can use ?

thanks for your example, looking at it now :slight_smile:


sorry, this example you posted : … 5_all.html
is about orientation, but think you meant to set offset to the tabbar ?

tried to

it’s ok with a few tabs, when add new tabs to it until scroll buttons appear, the offset doesnt exist, all tabs push to the very left.

But by some reason i haven’t attach my sample for you…
Here it is:

P.S. About hidden button close under the arrow: waite for updated js file, please.
tabbar12.10.26.rar (81.8 KB)

Here is an extention in the attachment. It will not be included in the suit, but is a little workaroud approach.
For using it just call method tabbar.enableScrollerTab()
dhtmlxtabbar_scroll_ext.rar (683 Bytes)

Hi Darya,

About your reply, this attachment: tabbar12.10.26.rar,
it’s actually separated the tabbar and the content area, then group them together using dhtml window, firstly, will it cause any problem if I just use normal html instead of dhtmlwindow ? secondly, this bit of code:

Ideally, width of ‘bar’ should be set to 100%, ‘visible button’ always takes 100px, ‘my_tab’ takes the remaining, and this should handle all window resizing events. currently, the dhtmlxtabbar I have works ok with window resizing. but doing it in this way, think have to handle ‘my_tab’'s width manually.

Second issue is. because of enableContentZone(false). so onclick of a tab, show certain content, this will have to be dealt with manually. not sure how this could effect new/close a tab.

The way I was trying to have the same effect, i saw the solution from here by setting offset:
the only issue with that is , when window resize, left scroll button does not appear, please find attached example code. if the left scroll button could appear, think it will solve the problem.

tanya_tabbar_offset_example.rar (41.3 KB)

About 1 issue: there is no way, if you want to get such behavior. This approach i’ve provide in my sample is unique.
The second issue will arise because of using offset. It is custom feature, that is why you can use it, if you have a few tabs, but if you have many tabs - this approach is wrong.


The second issue you meant is the disable content zone, right ?

Then can you look at the example code that i attached in previous comment, if left scroll button works normally, then the problem could be solved by setting offset.

Tanya, you set your custom button on the offset area. That’s exactly the issue you have, Something like a tab zone comes under your image.

tried setting the offset wider than the custom div, seems the left scroll button is not pushed by the offset, but is it supposed to be pushed ?

about this ext you wrote dhtmlxtabbar_scroll_ext.js
applied to current project as :

Suppose that is for auto scroll after closing some tabs, but got some error when adding new tabs, see attached example code:

tanya_tabbar_offset_example _scroll_ext.rar (74.1 KB)