Monday, April 5, 2010

Multirow Tab Container in Ajax Control Toolkit

I had an issue with Tab Container of Ajax Control toolkit, that i wanted to show mulitple rows as i had number of panels on my page. As making them display in one row was increasing my page width. Let me share a solution i found for this.

After openeing the AJAX Control tool kit solution, go to Tabs.css under AjaxControlToolkit/Tabs/

either comment this line
.ajax__tab_default .ajax__tab_header {white-space:nowrap;}
or change it to
.ajax__tab_default .ajax__tab_header {}

Rebuild the site, and update the reference of AjaxToolkit in your project to the new one. You should see 2 rows like this