Tab aligned right switches to the left

I have this tab that I initialize to align “right”. But when I change the image on the tab in javascript it aligns left.

In the javascript I change the image for Tab A in the onSelect event for Tab B. Is there something in the tab code that makes one Tab affect the alignment of the other tab in that way? Tab A should appear where the arrow points.

The code for setting the tab label looks like this:

$("#tab_a").css('z-index','89'); $("#tab_b").css('z-index','9999'); tab_a.setLabel("taba", "<img src='images/tab_a.png'>"); tab_a.setAlign("right");

There is a possibility to init a tabbar without content zone. You may define one container where the content of all tabbars will be displayed. Please see the sample in Tabbar package:

dhtmlxTabbar/samples/03_orientation/05_all.html

If you are sure that there are problems with tabbar align, please provide the complete sample that reproduces the problem.

The same problem happens without the content zone. This might be a bug that only happens if there is only one tab or if the tabbar does not have a number that fills the entire length. Here is sample code to reproduce the problem.

[code] tab_b = new dhtmlXTabBar(“tab_b”, “right”);
tab_b.setImagePath(“dhtmlxtabbar/codebase/imgs/”);
tab_b.addTab(“t1”, “”, “90px”);
tab_b.addTab(“t2”, “”, “90px”);
tab_b.addTab(“t3”, “”, “90px”);
tab_b.addTab(“t4”, “”, “90px”);
tab_b.setContent(“t1”,“tab_1”);
tab_b.setContent(“t2”,“tab_2”);
tab_b.setContent(“t3”,“tab_3”);
tab_b.setContent(“t4”,“tab_4”);
tab_b.setSkinColors(“red”, “white”);
tab_b.setCustomStyle(“t1”,“white”,“red”);
tab_b.setCustomStyle(“t2”,“white”,“red”);
tab_b.setCustomStyle(“t3”,“white”,“red”);
tab_b.setCustomStyle(“t4”,“white”,“red”);
tab_b.setTabActive(“t1”);

	tab_a = new dhtmlXTabBar("tab_a", "bottom","right");
	tab_a.setAlign("right");
	tab_a.setImagePath("dhtmlxtabbar/codebase/imgs/");
	tab_a.addTab("t5", "<img src='images/tab_5.png'>","90px");
	tab_a.setContent("t5","tab_5");
	tab_a.setSkinColors("red", "white");
	tab_a.setCustomStyle("t5","white","red");

[/code]

We need the complete demo. Here are docs about it:

docs.dhtmlx.com/doku.php?id=othe … leted_demo

The bottom right aligned tab switches to the left when clicked. Here is the HTML.

[code]

<div id="channel_tab"  class="dhtmlxTabBar" imgpath="dhtmlxTabbar/codebase/imgs/" style="width:252px; height:333px; z-index: 9999; position: absolute; top: 48px"> </div>
	  <div id="tab_1">
	  <div id="scroll_1" class="scroll_channels">
	  </div>
	  </div>
		
	  <div id="tab_2">
	  <div id="scroll_2" class="scroll_channels">
	  </div>
	  </div>

	  <div id="tab_3">
	  <div id="scroll_3" class="scroll_channels">
	  </div>
	  </div>

	  <div id="tab_4">
	  <div id="scroll_4" class="scroll_channels">
	  </div>
	  </div>
	  

<div id="my_tab"  class="dhtmlxTabBar" imgpath="dhtmlxTabbar/codebase/imgs/" style="position: absolute; top: 48px; width:232px; height:353px; z-index: 99;"> </div>
	  <div id="tab_5">
	  <div id="scroll_5" class="scroll_channels" style="top:0px;">
	  </div>
	  </div>
[/code]

I have attached the sample with “bottom” tabbar that is aligned right - the problem doesn’t occur.
tabbar.zip (35.3 KB)

Instead of reproducing the bug with the HTML I sent you, you preferred to make a new file that does not have the problem? If you point the file I sent you to your dhtmlxtabbar directory you will find the problem that I describe.

Found the problem. Here is the fixed dhtmlxtabbar.js
dhtmlxtabbar.zip (12.4 KB)

Seems to work.