I have a page that has too many tab buttons, so that the tab control exceeds the page width. How can I make the tab control to break the buttons in multiple rows?

Uh, I think, I got it... I took out the whitespace-nowrap out of the tabs.css file and it breaks the tab buttons now according to the available width.

Hi... I'm trying to do this and I recreated a CSS file that doesn't have the whitespace-nowrap in the ajax__tab_header... and the tab panels still don't wrap to a 2nd row... do you have any other ideas?

 J

That is all I did, modified the Tabs.css in the AjaxControlToolkit, recompiled it and used the new DLL.

That worked - thanks! I originally just modified the CSS file in my project and did not think to recompile the actual AjaxControlToolkit .dll and update the reference to it in my project.  However... I do wish they would extend the control to be able to modify which tabs show up in each row.  I found that depending on the width of my tab container and the width of each tab, there were multiple scenarios in which there were more tabs on the top-most row than on the row closest to the content... and this appeared very lopsided.  That is definitely nitpicking... but if a large part of Ajax is rich presentation... then they should let us make it even richer!  Thanks again.

I am trying to do the same, except I am not sure how go about and change Tabs.css and recompile and use the new DLL.

If not too much trouble, could you explain how you did it in detail?

thanks

 

Hi... I'm also eagerly interested to know how you went about by recompiling the .dll file. I have modified the Tabs.css in the Ajaxcontroltoolkit folder, saved it yet coming to a stop as to what's next.
Thanks for clearing out this to those of us who didn't quite fully understood the procedure.

Kind regards,

Jeewai

Well, if you downloaded the AjaxControlToolkit with source, there should be a Visual Studio Project file in the root folder where you extracted all the files. Just open it and build the project, after that you just include the new DLLs from the same spot as usual (e.g. xyz\AjaxControlToolkit\bin\Debug) as they will be replaced by the rebuild.

Thanks for your reply John.Doe but I'm still stuck when trying to rebuild the project, maybe because I'm really new to the whole VWD .net stuff.

1) I have made the necessary changes to Tabs.css, (.ajax_tab_default .ajax_tab_header {}) to get rid of the wrap.
2) Now, under AjaxControlToolkitfolder, besides the subfolders (accordion, Tabs...) I have 4 files I AjaxControlToolkit.csproj, AjaxControlToolkit.dll, AjaxControlToolkit (PDB file) and AjaxControlToolkit (Visual studioStrong Name Key file). I open the AjaxControlToolkit.csproj in my project which of course has already the file I'm working on (with the tab stuff)
3) What do I do next, should I hit the Build button on the toolbar of the VWD. Can you literraly explain how do you build the project (do you run it?)  That's where I'm stuck

4) Then I got the last step which simply consists in re importing the new tool kit elements (.dll) (Accordion, Calendar, Tabpanel) on the left toolbox to be then used on the page.

 Thanks in advance for the help. That would give me such a relief.

 Kind regards,

Jeewai
 

You do not need to recompile the toolkit. All you need is to place use a css file in your website.

 In my case:

.tabs .ajax__tab_header {

white-space:normal!important;

}

Where .tabs is the new name of the cssclass of my tab container. The default is .ajax__tab_default

I dowloaded ajaxcontroltoolkit without source, so I add .Tabs.ajax_tab_header{ white_space:normal!important;} into file css of my page. Is that right? But all tabs till in a rows.

http://forums.asp.net/t/1155767.aspx

Maybe this'll help..

About a year late to the party, but I spent some time going through the forum and didn't find any easy solutions to the tab wrapping issue. I did get my tabs to wrap by adding this CSS to my own CSS stylesheet. There is no CssClass assigned to my TabContainer or TabPanel:

.ajax__tab_default .ajax__tab_header
{
    white-space: normal!important;
}

 

My tabs now wrap, but are off. The upper row tends to extend farther than the lower row. Some mucking around with the TabPanel order can help.

 Thanks to the others for their answers on this.