Home > .net 2.0, .net 3.0, .net 3.5, AJAX, c#, Microsoft, Visual Studio 2008 > Wrapping TabPanel Tabs With A Simple CSS Change

Wrapping TabPanel Tabs With A Simple CSS Change

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.

  1. Les
    February 25, 2009 at 10:42 pm

    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!

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: