Dojo tab placement

It turns out that Dojo allows you to position the labels of the tabs. Using the labelPosition attribute, you can place them on the top left (default), bottom of the box and also on the sides of the boxes. So the full line looks like this: <div id=”mainTabContainer” dojoType=”TabContainer” selectedTab=”tab2″ labelPosition: “top”>. The valid values of labelPosition are:

top, bottom, left-h, left-r

Your Dojo installation has a test script that shows these settings in action and it can be found at <dojo installation>/tests/widget/test_TabContainer.html

Now all of these options do not help me because I want the tabs to be positioned right next to another HTML element that I have positioned using CSS absolute positioning.

I know that there are other options that are listed on the Dojo discussion forum but here is how I achieve the absolute positioning of the tabs. I do not want to edit any of the dojo source files because I want my site to continue to work when I upgrade the Dojo libraries and therefore I simply created a new labelPosition tag. It turns out that these positioning tags are actually CSS statements in the templates folder. I now include these additional definitions in my site CSS files.
.dojoTabLabels-custom {
position : absolute;
top : -24px;
left : 260px;
overflow : visible;
margin-bottom : -1px;
width : 100%;
z-index: 2; /* so the bottom of the tab label will cover up the border of dojoTabPaneWrapper */
}
.dojoTabLabels-custom {
overflow : visible;
margin-bottom : -1px;
width : 100%;
z-index: 2;
}
Theonly downside, is that you might have to change your CSS positioning to line up the tabs with the box but this is basic CSS. In this example, the tabs will be positioned 260px from the left border.