tabs-left and tabs-right showing below tabs

[dougzor]

When using tabs, in particular when using tabs-left and tabs-right the actual tab-content is showing below the tabs. See the linked screenshot from the twitter bootstrap site. I've replicated this in Windows 7 Firefox and Ubuntu 11.10 x64 Chrome and Firefox.

I confirmed locally in a project I'm working on that rolling back to 2.0.1 fixes the issue.

Link to photo: http://dl.dropbox.com/u/29385842/Tab%20alighnment%20problem.png

[chuckshaw]

The addition of "width: 100%" for .tab-content causes the side tabs to break.

In my local copy i replaced "display: table; width: 100%" with "display: block;" for .tab-content to fix the issue for me.

[cnicodeme]

I confirm this bug, using 2.0.2.

In file navs.less, line 267 -> 270, replace

.tab-content {
  display: table; // prevent content from running below tabs
  width: 100%;
}

by

.tab-content {
  display: block;
}

or eventually if this causes an error with other tabs :

.tabs-left .tab-content, .tabs-right .tab-content {
  display: block;
}

[neersighted]

Same here. But when I try your fix, my content overlaps the tabs. http://bot.neersighted.com/plugins.php

[chuckshaw]

neersighted,looking at your code, you still have:

.tab-content { display: table; width: 100%; }

in bootstrap.min.css. Change it so that its one of the two options that are listed above such as just "display: block;" without the width: 100%. That should correct your problem. The default 2.02 code is what is breaking your layout.

[neersighted]

Actually, I was overriding it with second stylesheet. I just rolled back a version until this is fixed.

Sent from my iPad

On Mar 14, 2012, at 4:41 PM, Chuck Shawreply@reply.github.com wrote:

neersighted,looking at your code, you still have:

.tab-content { display: table; width: 100%; }

in bootstrap.min.css. Change it so that its one of the two options that are listed above such as just "display: block;" without the width: 100%. That should correct your problem. The default 2.02 code is what is breaking your layout.

---

Reply to this email directly or view it on GitHub: https://github.com/twitter/bootstrap/issues/2538#issuecomment-4510955

[mdo]

Resolved in 2.0.3-wip via another branch: reset width to auto for left and right tabs.

[iamegghead]

I tried the fix of using auto but there seems to be a change of behavior for a table contained within a tab. In 2.0.1 the table would expand to fill the width of the containing 'tabbable' div but now it is pulled left to just the width of the content of the table. Not sure if this should be an issue of its own but seemed related to this one

[hperrin]

This is causing tables in a tab to expand to the width of their content. I have a datagrid component that uses a table and has overflow: auto; to provide scrollbars. But when it's in a tab, it instead expands to the width of its content. If I change .tab-content to display: block; it works.

(Firefox 11)

[Lbatson]

In 2.0.2, .tab-content { display: table; width: 100%; } changing to width auto will fix it but I also found using display:inline; to work as well. I'm just overriding this currently with a custom style sheet.

[chuckshaw]

Yeah, in my local copy I modified .tab-content to look like this:

.tab-content {
  display: block;
}

That set the behavior back to the way it was pre 2.0.2 and doesn't seem to break the bug fix that was the reason this code changed in the first place.