Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Tabs don't display properly in fluid layout. #104

Closed
bialecki opened this issue Aug 27, 2011 · 7 comments
Closed

Tabs don't display properly in fluid layout. #104

bialecki opened this issue Aug 27, 2011 · 7 comments
Milestone
v1.3.0

Comments

@bialecki
Copy link

In Chrome 13.0.7 on Mac OS X 10.6. The following snippet renders the tabs with the bottom border below the sidebar. Or see this jsfiddle: http://jsfiddle.net/7W32Z/.

<html>
  <head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="sidebar">
        <div style="height: 500px; background: red;"></div>
      </div>
      <div class="content">
        <div style="height: 500px; background: #eee;">
          <ul class="tabs">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Messages</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
@bialecki
Copy link
Author

Also see this in FF 6.0.

@bialecki
Copy link
Author

Not sure how much of a hack this is, but for now I can work around it by setting the height of the tabs myself. Since we're already setting the line-height dynamically, the following works:

.tabs {
    ...
    height: (@baseline * 2) - 1;
 }

Doesn't feel right, but in case someone comes across this issue, it's one potential workaround.

@bialecki
Copy link
Author

Ah, floating the tabs solves the problem. I'm not sure why, but that's the fix I've got for now. Feel free to close if that's the solution.

@rshsdev
Copy link

rshsdev commented Aug 27, 2011

i've tried that on bootstrap 1.0.0, but no luck, im gonna try again, same issue #103

@rshsdev
Copy link

rshsdev commented Aug 27, 2011

it works,... nice job..

@mdo
Copy link
Member

mdo commented Sep 3, 2011

Resolved by floating the ul.tabs in the next branch, 1.3-wip.

@mdo mdo closed this as completed Sep 3, 2011
@snapshot
Copy link

In case this helps anyone I wanted to mention that I was still having a problem with this even using the latest code. I found this #343 which fixed it for me

@snyk-bot snyk-bot mentioned this issue May 9, 2021
Open
This was referenced Sep 12, 2021
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v1.3.0
Development

No branches or pull requests
4 participants
@mdo @bialecki @snapshot @rshsdev