multi-line tabs

Question

I am struggling with a HTMl/Css issue. I am creating tabs using ul and li. The list of tabs is dynamic and can extend upto 10 tabs. The problem is that the list breaks on 100% width and the tabs overlap. Is it possible to calculate when the list reaches near to 100% width, so I can create a second set of tabs?

Here is the link to an example.

http://jsfiddle.net/syEJx/5/.

The upper text of tabs 8,9, and 10 get cut off. I want to avoid that

Thanks

@Alpine. I edited my question with a link to the example code. — DG3, Feb 22 '11 at 20:43
may helps: http://stackoverflow.com/questions/6660370/how-to-make-jquery-ui-tabs-scroll-horizontally-if-there-are-too-many-tabs http://stackoverflow.com/questions/624516/is-there-a-jquery-tab-control-which-handles-multiple-lines-of-tabs-well — Iman, Nov 16 '14 at 15:26

score 1 · Answer 1 · answered Feb 22 '11 at 20:00

1

CSS (without the help of Javascript) cannot calculate dimensions in that manner but if your li's were floated within a ul with no height limit and a constant width then your tabs would populate left to right and top to bottom. Another option might be to style your ul to display:block and your li's to display:inline. That might be better since the ul would expand around the li's. I think that's the behavior you are looking for.

answered Feb 22 '11 at 20:00

MDaubs

2,984
1
17
12

I edited my question with a link to the code. I tried your suggestion, but it does not work. – DG3 Feb 22 '11 at 20:41

score 0 · Accepted Answer · answered Feb 22 '11 at 23:09

How about this?

Live Demo

enter image description here

The new CSS:

.tabs li
{
    display: inline-block;
    margin: 0 0 15px 0;

    /* ie7 hacks */
    zoom:1;
    *display: inline;
    _height: 20px
}

It includes hacks necessary to make it work acceptably in IE7. If you don't care about IE7, feel free to remove those three lines.

multi-line tabs

2 Answers2

Linked