Opened 14 years ago
Closed 13 years ago
#4588 closed bug (wontfix)
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 (4)
Changed 14 years ago by
comment:1 Changed 14 years ago by
Milestone: | TBD → 1.8 |
---|
comment:2 Changed 14 years ago by
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>
comment:3 Changed 13 years ago by
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?