Wrapping TabPanel Tabs With A Simple CSS Change
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.
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!