Fun with Dojo tabs
I recently had a need (not a fleeting need but a resolute need…PotC reference) to create a page containing some tabs and wanted to use Dojo for the job. Dojo worked well for this application. However, Dojo’s TabContainer displays tabs starting at the left of the container. I wanted the tabs to align to the right side of the container.
Here’s what a normal Dojo TabContainer would look like (by the way, I’m using the “soria” theme):
Dojo TabContainer with the horizontal tabs on the left.
After a bit of CSS trial and error (made easier with the use of Firefox’s Firebug plugin utilizing its “edit” mode), I finally figured out a simple solution to my problem. With Firebug, I was able to see that the class being used for each tab was called dijitTab. So, I simply added the following CSS to my page to get the tabs to align to the right side:
.dijitTab {
float:right;
}
Great! Now all my tabs were on the right side of the container. But, something wasn’t right…they were in reverse order.
Dojo TabContainer with horizontal tab on right but in reverse order.
This is because Tab1 was defined first and was getting floated to the far right. Tab2 was defined next and getting floated right, but to the left of Tab1, ditto with Tab3. To fix this, I just rearranged the HTML to define Tab3 first, then Tab2 and finally Tab1. This resulted in Tab3 being floated to the far right of the container, Tab2 being floated right (left of Tab3) and Tab1 floating right (to the left of Tab2). Voila! The result I was looking for.
Dojo TabContainer with horizontal tabs on right side in correct order.