Nested Tabs with different styles doesn't work #1823

Closed
petecocoon opened this Issue Feb 8, 2012 · 8 comments

Projects

None yet

6 participants

@petecocoon

Hi!
It's seems that if i have a left-aligned tabs with .tabs-left class, isn't possible to insert a nested tabs with another style (for example the default top aligned style).

@mdo
Member
mdo commented Feb 12, 2012

What about it doesn't work? CSS, JS? Have a jsfiddle or example to include?

@silviustan

Hi,

I have the same problem.

My example code is here: http://pastie.org/3394325

The problem is that inside on a left("Tabs on the left") tabbed content I put new tabs but I don't want to inherit the parent tabs behavior. I want that child tabs to be on top, or below.

Thanks for the great stuff! :) I love it!

@nimasmi
nimasmi commented Feb 25, 2012

It's possible for now if you make the outer one <ul class="nav nav-list pull-left">, and don't use the .tabbable div at all.

You don't get quite the same look.

@mdo
Member
mdo commented Mar 12, 2012

You'll have to provide a jsfiddle please. Pasting in @silviustan's example code (and fixing his broken a tag in the second level of tab links) doesn't show me anything worthwhile locally.

@notanumber

I'm having the same issue. To elaborate, it looks as though there's no way of specifying a different style of tabs on an inner set of tabs. For example, if you have something like a page with tabs-left and want to have another area with tabs on the top inside a div on the page it doesn't work. You end up with the "inner" tabs all left aligned as well.

@notanumber

Alright, here's the CSS I used to "fix" the issue. It adds another class: "tabs-above" that you can use. I'm sure someone that's a lot better at CSS then I am can clean this up.

.tabs-above {
    border-right: none;
}
.tabs-above .nav-tabs {
    float: none;
    margin-right: auto;
    border-bottom: 1px solid #ddd;
    border-right: none;
}
.tabs-above .nav-tabs > li {
    float: left;
}
.tabs-above .nav-tabs > li > a {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    margin-right: 2px;
    margin-bottom: 0;
}
.tabs-above .nav-tabs .active > a,
.tabs-above .nav-tabs .active > a:hover {
    border-color: #ddd #ddd transparent #ddd;
}
@NateRadebaugh

JSFiddle of silviustan's code: http://jsfiddle.net/X5SWD/

@mdo
Member
mdo commented Apr 15, 2012

Solved this by increasing specificity rather than adding a new class.

@mdo mdo closed this Apr 15, 2012
@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@mdo mdo (less) fix #1823: styles of tabs within other tabs resolved e2c403e
@stempler stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo mdo (less) fix #1823: styles of tabs within other tabs resolved a92655b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment