Opened 10 years ago

Closed 10 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)

Test.htm​ (1.5 KB) - added by eascorp 10 years ago.

Download all attachments as: .zip

Change History (4)

Changed 10 years ago by eascorp

Attachment: Test.htm​ added

comment:1 Changed 10 years ago by Jörn Zaefferer

Milestone: TBD → 1.8

Is quirks mode really supported?

comment:2 Changed 10 years ago by eascorp

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 10 years ago by Scott González

Resolution: → wontfix
Status: new → closed

We don't support using jQuery UI plugins on pages where the body's dimensions or positioning is modified.

Note: See TracTickets for help on using tickets.