Tab aligned right switches to the left

Suite and Optimus Suite 5
#1

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");

#2

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.

#3

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]

#4

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

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

#5

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]
#6

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

#7

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.

#8

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

#9

Seems to work.