Feedburner
Wrapping TabPanel Tabs With A Simple CSS Change
Posted by David on July 10, 2008
The last few weeks have been filled with taking an old ASP legacy application and updating it to ASP.NET. Fun stuff and not to challenging.
However, a “feature” of the AJAX Control Toolkit’s TabContainer finally hit a nerve. In the past, I’ve ignored the fact that I couldn’t “wrap” the tabs or set how many rows of tabs to create. I chalked it up to an annoyance and designed applications with this in mind.
After hunting through the Control Toolkit’s source code, the problem is simple. There’s a line in the CSS explicitly telling it not to wrap.
Well, recompiling the toolkit can get annoying and hurts mobility of your applications—it’s no fun to bundle “custom” copies for a simple styling change.
.ajax__tab_header
{
white-space: normal !important;
}
That will override the nowrap that is built into the Toolkit’s CSS.
Hopefully, someday, this will be a boolean property on the TabContainer control.
Les said
I am trying to solve a similar issue. I need the tabs themselves to support multiple lines of text. How can I do this?
If I were to use your solution instead, how do I use the code you show?
Thanks!