Making the AjaxToolKit TabContainer tabs vertical

A chat user asked me the other day of how does one put the tabs in the AjaxToolKit TabContainer vertically and I had no idea. I've decided to do it today and write this blog post, maybe he'll come back and he'd get the answer.

So, the request is simple: take a web site with a TabContainer in it and make it show the tabs vertically. I can only assume that the vertical tabs would go on the left and the content in the right. So I took the Internet Developer Toolbar and analysed the html output of a page with four static tabs. I added a <style> tag with CSS classes and started making changes until it worked. Unfortunately, the same setup would not work on Firefox, so I had to repeat the process using Firebug to analyse the page output. In the end this is the result:

<style>
.ajax__tab_header {
    float:left;
}
.ajax__tab_body {
    /*float:left;*/
    margin-left:220px;
}
.ajax__tab_outer {
    display:block !important;
}
.ajax__tab_tab{
    /*min-width:200px;*/
    width:200px;
    height:auto !important;
}
</style>

.

Add this on top of your page or include it in your CSS and the tabs will appear vertically.

Now for a bit of explaining.

• First of all this does not overwrite the CSS that the TabContainer loads because it is organized under a general ajax__tab_xp class like: .ajax__tab_xp .ajax__tab_header .
• Then the width of 200px is arbitrary. I used it to keep the vertical tabs at the same width. I tried using min-width first, but it won't display right in Firefox.
• Another point is about the ajax__tab_body class that I tried to set up first as float left, which would place the body div next to the tabs div, however this breaks if the body tab is wider and the content would appear underneath the tabs div. Thanks to my colleague Romeo I used the margin-left trick. 220px is enough to work in both IE and Firefox. It can be made smaller (closer to 200px)if the default IE body margin would be 0.
• The !important keyword is placed to overwrite some settings that are already set up in the original TabContainer CSS.
• Last issue: now the right panel will be truncated if it gets too large. You should control the overflow of that div, although, as far as I am concerned, my job is done

As a kind of disclaimer, I am not a CSS expert. If you know of a better way of doing this, please let me know.