Multiple Rows of TabPanels

In Nazar Rizvi’s blog he talks about making changes to the default AjaxToolkit TabPanel’s css class to enable multiple rows of tabs.

http://www.narizvi.com/blog/post/Two-rows-of-tab-headers-in-TabContainer-in-Ajax-Control-Toolkit.aspx

The blog teaches where to modify in the source code and you have to rebuild the dll. However, you can just put the following in your style sheet. Note that you do need all of them, and the !important.

.ajax__tab_default .ajax__tab_header {white-space:normal !important;}
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

By Bryan Xu

Posted in CSS

Leave a Reply