Multi line tabs in ajax tab container?

Question

4.00/5 (1 vote)

See more:

Currently there are lot of tab panels(20) inside my tab container. As a result once i run the site, a horrizontal scrollbar apears on the webpage.
Is there a way to shift the remaining tabs to next line so that no scroll bar appears?

Posted 25-Feb-10 18:37pm

S Rajput

Add a Solution

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

san_416 · Answer 1 · 2010-04-25T11:32:00

Solution 3

Use this in css:

.ajax__tab_default .ajax__tab_header /* this makes the tabs wrap*/
{
white-space: normal!important;
}

Posted 25-Apr-10 11:32am

san_416

Comments

[no name] 9-Dec-11 8:50am

Yes. This does work satisfactorily. Thanks

RaisKazi 27-Jul-12 17:18pm

My 5!

Sandeep Mewara · Answer 2 · 2010-02-25T18:53:00

Solution 1

I believe there must be an option to have fix width of the tab container. Thus on addition of new panels it would not grow. Try that.

Posted 25-Feb-10 18:53pm

Sandeep Mewara

S Rajput · Answer 3 · 2010-02-25T19:15:00

Solution 2

I tried setting Tab container's Width to some value but it just sets the width of the tab panel not the actual container. Any other suggestion?

Posted 25-Feb-10 19:15pm

S Rajput

chamieshani · Answer 4 · 2010-06-11T00:30:00

Solution 4

.ajax__tab_default .ajax__tab_header /* this makes the tabs wrap*/
{
white-space: normal!important;
}

It is working fine. but the problem is it looks weird if the tab line comes to the next line.

Posted 11-Jun-10 0:30am

chamieshani