Skip to content

Instantly share code, notes, and snippets.

@smagch

smagch/tab-content bug

Created March 14, 2012 20:16
Show Gist options
  • Save smagch/2039204 to your computer and use it in GitHub Desktop.
Save smagch/2039204 to your computer and use it in GitHub Desktop.
Download ZIP
Twitter Bootstrap v2.0.2 bug, tab-content class with absolute position
Raw
tab-content bug
<html>
<head>
<!-- <link rel="stylesheet" href="bootstrap.2.0.1.css" type="text/css" media="screen" title="no title" charset="utf-8"> -->
<link rel="stylesheet" href="bootstrap.2.0.2.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
#wrapper {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#content {
position: absolute;
top: 300px;
bottom: 0;
background: #999;
width: 100%;
overflow-y: auto;
border-top: 4px solid #2E2E2E;
}
</style>
</head>
<body>
<div id='wrapper'>
<h1>Twitter bootstrap bug with tab-content</h1>
<p>v2.0.1 scroll correctly </p>
<p>v2.0.2 is wrong. scroll should be shown inside <code>#content</code></p>
<div id='content' class='tab-content'>
<h2>the position of this block<code>#content.tab-content</code> is absolute.</h2>
<pre>
<code>
#wrapper {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#content {
position: absolute;
top: 300px;
bottom: 0;
background: #999;
width: 100%;
overflow-y: auto;
border-top: 4px solid #2E2E2E;
}
</code>
</pre>
<ul>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
<li>hoge</li>
</ul>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment