Search and Top Navigation
#4588 closed bug (wontfix)
Opened June 09, 2009 06:38PM UTC
Closed November 13, 2009 03:26AM UTC
Tab repositioning on window resize issue
| Reported by: | eascorp | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.8 |
| Component: | ui.tabs | Version: | 1.7.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
On a web page with body style:
margin-left: auto;
margin-right: auto;
width: XXXpx;
i.e. an auto-centered web page
And with browser running in IE8's compatibility mode (Quirks), the JQueryUI Tabs don't reposition themselves on window resize. Example, maximize browser window or change window width.
After a hover event, the tabs move into correct position.
code to reproduce:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="idJQueryStylesheet" href="/jquery/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
<title></title>
<style type="text/css">
body
{
font-family: Tahoma, Sans-Serif;
font-size: 12px;
width: 200px;
margin-left: auto;
margin-right: auto;
margin-top: 6px;
border: solid 1px #a0a0a0;
background-color: #f3eae4;
}
.Content
{
background-color: #ffffff;
}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#tabs").tabs();
$("#tabs").show();
});
</script>
</head>
<body>
<div class="Content">
<div id="tabs" class="ui-tabs" style="display:none;">
<ul>
<li><a href="#tabs-1">Tab #1</a></li>
<li><a href="#tabs-2">Tab #2</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-hide">
</div>
<div id="tabs-2" class="ui-tabs-hide">
</div>
</div>
</div>
</body>
</html>
Attachments (1)
Change History (3)
Changed June 10, 2009 09:43AM UTC by comment:1
| milestone: | TBD → 1.8 |
|---|
Changed June 10, 2009 11:55AM UTC by comment:2
I've resolved this issue via the following CSS workaround, borrowed from the JQueryUI demo page, where the tabs were not demonstrating the behavior described on this ticket:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link id="idJQueryStylesheet" href="/jquery/css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/jquery/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/jquery/js/jquery-ui-1.7.2.custom.min.js"></script>
<title></title>
<style type="text/css">
html {
overflow-y: scroll;
background-color: #5f5f5f;
}
body {
margin: 0;
padding: 0 0 20px;
min-height: 100%;
font-family: "Arial", "Helvetica", "Verdana", "sans-serif";
font-size: 10px;
}
#wrapper {
margin: 0 auto;
width: 800px;
position: relative;
background-color: #ffffff;
}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
$("#tabs").tabs();
$("#tabs").show();
});
</script>
</head>
<body>
<div id="wrapper">
<div id="tabs" class="ui-tabs" style="display:none;">
<ul>
<li><a href="#tabs-1">Tab #1</a></li>
<li><a href="#tabs-2">Tab #2</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-hide">
</div>
<div id="tabs-2" class="ui-tabs-hide">
</div>
</div>
</div>
</body>
</html>
Changed November 13, 2009 03:26AM UTC by comment:3
| resolution: | → wontfix |
|---|---|
| status: | new → closed |
We don't support using jQuery UI plugins on pages where the body's dimensions or positioning is modified.
Is quirks mode really supported?