Siderite's Blog

and has 18 comments
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.

Comments

Gauri

Great explanation! This solution worked *Just About Right*!

Gauri

Unknown

Yep - The verticle tab capability in the AJAX tabcontainer has at least a couple of serious bugs which haven&#39;t been addressed as of the June 2012 release :( They work fine in Chrome and IE9, but break badly in IE8.

Unknown

Nelviticus

Thanks from me too. I had the same problem as TyB - TabContainer supports vertical tabs in the current version but they are broken. The script tries to set a &#39;spanner height&#39; to a negative value, which works in Firefox/Chrome but fails in IE.

Nelviticus

Siderite

Glad I could help. When I wrote this post I don&#39;t think they even had vertical tabs as an option.

Siderite

TyB

THANK YOU! I just added the new TabContainer control from the .Net 4 AjaxToolKit which introduces the vertical tab. Problem is that there is a major bug if you use vertical tabs. If you change any default property of the tab or controls in the tabs it throws a JScript error. If your interested in more detail with my problem see http://forums.asp.net/p/1760620/4797507.aspx/1?p=True&amp;t=634629383826677143. Thanks TyB

TyB

Anonymous

Wow! Thanks a lot. I&#39;ve been searching high and low on how to make the tabbed panels veritcally..and your solution is so simple and works perfect!!

Anonymous

vhrao

How can I add a drop down menu to a horizontal tab. I defined a simple ul based listing in HeaderTemplate and it does not work.

vhrao

Anonymous

Does anyone have a link to a working example? Thanks

Anonymous

Madhanlal

Your code for vertical tab helps me very much. Thank you.

Madhanlal

Siderite

Well, try to use Internet Explorer Developer Toolbar or FireBug to see what is wrong and tweak it until it works. Maybe the width of the screen is too small? What browser are you using? Search for me in the chat window.

Siderite

wrathyimp

Hi siderite, I applied your style to make the tabs vertical. the tab header are now vertically align, but the tab body is coming below the tab headers. Could please suggest or guide to fix this little issue. thanks.

wrathyimp

Anonymous

public class TC : TemplateControl, ITemplate { private GridView _g; public GridView Grid { get { return _g; } set { _g = value; this.Controls.Add( _g ); } } #region ITemplate Members public void InstantiateIn( Control container ) { container.Controls.Add( this ); } #endregion } Is the only way I have found to get over the problem! If you add a control to TabPanel using the controls collection, something in AJAX kicks up about a &quot;null handler&quot; property. I admit the AJAX documentation is not great!

Anonymous

Siderite

I could help if you explain it better. Can&#39;t you use the chat so we can talk in real time? From what I understand, you want to create tabs in a tab container dynamically and add stuff to them. Doesn&#39;t this post help: http://siderite.dev/2007/07/fixing-tabcontainer-to-work-with.html ? Or is the problem that you can&#39;t add stuff to them because they are templated controls? I did an application where I was dynamically adding TabPanel objects and I didn&#39;t really need an ITemplate. Just: TabPanel tb=new TabPanel(); TabContainer.Tabs.Add(tb); tb.Controls.Add([stuff]);

Siderite

Anonymous

OT:comment You seem to have a good grasp of this subject, noting blog from last year - I have an issue with a TabContainer and dynamically adding Tabs. The DB returns a list of Types - with maybe six values - and the tabs are supposed to be instantiated to contain small lists of items of that Type in a separate DB Select... The problem is I can&#39;t tie the Page.LoadTemplate template to a particular DB select statement, it is dependent on the Type. Nor do I want to ideally - all I really want to do is assign a populated GridView to each Tab as a prebuilt control - ie. thisTab.Controls.Add( gridview ); thisTabContainer.Add( thisTab ); Maybe I have missed something. Can you help? Many thanks.

Anonymous

Post a comment