Skip to main content

Search and Top Navigation

#8020 closed bug (wontfix)

Opened January 16, 2012 01:32PM UTC

Closed January 16, 2012 05:32PM UTC

Last modified January 17, 2012 01:24PM UTC

Accordion behaves differently in Firefox if active or not on first display

Reported by: gunnicom Owned by: gunnicom
Priority: minor Milestone: 1.9.0
Component: ui.accordion Version: 1.8.17
Keywords: Cc:
Blocked by: Blocking:
Description

Firefox 9.0.1

jQuery: 1.7.1

jQuery-UI: 1.8.17

I got a page with a accordion. If you got one active "tab" the content in following example gets not expanded to the whole width.

If you start with no active "tab", and for every tab not active at the beginning the content gets expanded to full width like intended.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">                            
<html>                            
    <head>                            
        <script  language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script  language="JavaScript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
        <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <style type="text/css">
<!--
* { font-family:Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; }
table {border-spacing:0px; 
       border-collapse:collapse; 
       list-style-type:none; 
       margin:0px;}
th {border-right: solid 1px #999999;}
td { font-size:12px; font-family:arial; height:25px; padding-left:0px; }
td.flat { font-size:12px; height:1px; font-family:arial; padding-left:0px; }
.odd{
    background:#F8F8F8;
}
.even{
    background:#D0D0D0;   
}
-->
</style>
    </head>
    <body style="height:100%; margin: 0px; padding: 0px; background:#FFFFFF; color:#000000;">
        <div style="height:100%; padding: 0px; margin:0px auto 0px 0px; min-height:97%; overflow:hidden; width:100%;">
            <script  language="JavaScript" type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
            <script  language="JavaScript" type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
            <script type="text/javascript">
                $(function() {
                    $( "#accordion" ).accordion({
                        active:0,
                        //active:false,
                        autoHeight: false,
                        navigation: true
                    });
                });
            </script>   
            <div style="margin:10px; width:98%;" id="accordion">
                <h3><a href="#">First</a></h3>
                <table width="100%" id="sortable" style="width:100%;">
                    <colgroup>
                        <col width="100%"/>
                    </colgroup>
                    <thead>
                        <tr style="width:100%; border-bottom:solid 2px black;" class="even">
                            <th style="width:100%"></th>
                        </tr>
                    </thead>
                    <tbody> 
                        <tr style="width:100%;" class="odd">
                            <td style="padding-left:3px; width:100%;">
                                <a style="margin-left:10px;" href="#">A</a><div style="float:right; margin-right:10px;">1</div>
                            </td>
                        </tr>
                        <tr style="width:100%;" class="even">
                            <td style="padding-left:3px; width:100%;">
                                <a style="margin-left:10px;" href="#">B</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h3><a href="#">Second</a></h3>
                <table width="100%" id="sortable" style="width:100%;">
                    <colgroup>
                        <col width="100%"/>
                    </colgroup>
                    <thead>
                        <tr style="width:100%; border-bottom:solid 2px black;" class="even">
                            <th style="width:100%"></th>
                        </tr>
                    </thead>
                    <tbody> 
                        <tr style="width:100%;" class="odd">
                            <td style="padding-left:3px; width:100%;">
                                <a style="margin-left:10px;" href="#">A</a>
                            </td>
                        </tr>
                        <tr style="width:100%;" class="even">
                            <td style="padding-left:3px; width:100%;">
                                <a style="margin-left:10px;" href="#">B</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
    </body>            
</html>            
Attachments (0)
Change History (6)

Changed January 16, 2012 01:33PM UTC by gunnicom comment:1

_comment0: Forgot to mention: In Internet-Explorer 8 this does not happen.1326720940486147

Forgot to mention: In Internet-Explorer 8 this does not happen, but same bug with google chrome.

Changed January 16, 2012 01:39PM UTC by scottgonzalez comment:2

owner: → gunnicom
status: newpending

Please provide a reduced test case, not just the code for the reduced test case (see the red box that says not to paste large blocks of code in the ticket). Make sure you use HTML 4.01 Strict, or some other doctype that triggers standards mode, since that is a requirement for jQuery and jQuery UI.

Changed January 16, 2012 05:01PM UTC by gunnicom comment:3

_comment0: How should i provide the test case? I dont understand the jsFiddle or jsbin thingies.1326733586251558
_comment1: How should i provide the test case? I dont understand the jsFiddle or jsbin thingies. \ Do you mena like this: \ \ http://jsbin.com/etujoy1326733597782555
_comment2: How should i provide the test case? I dont understand the jsFiddle or jsbin thingies. \ Do you mean like this: \ \ http://jsbin.com/etujoy1326733630300519
_comment3: How should i provide the test case? I dont understand the jsFiddle or jsbin thingies. \ Do you mean like this: \ \ http://jsbin.com/etujoy/21326733696538907
_comment4: How should i provide the test case? I dont understand the jsFiddle or jsbin thingies. \ Do you mean like this: \ \ http://jsbin.com/etujoy/31326734187473723
status: pendingnew

How should i provide the test case? I dont understand the jsFiddle or jsbin thingies.

Do you mean like this:

http://jsbin.com/etujoy/3

And here you can see the difference in the first content if none was active in the beginning:

http://jsbin.com/etujoy/4

Changed January 16, 2012 05:32PM UTC by scottgonzalez comment:4

resolution: → wontfix
status: newclosed

This seems to be related to defining the width of the table inline. Just wrap your tables in divs so that you're not competing with the accordion.

Changed January 17, 2012 09:50AM UTC by gunnicom comment:5

So basically you are saying it is no bug, that these two render differently:

$( "#accordion" ).accordion({
    active:false,
});
$( "#accordion" ).accordion("activate",0);
$( "#accordion" ).accordion({
    active:0,
});

Ok, i will accept that, even if my opinion differs ...

Changed January 17, 2012 01:24PM UTC by scottgonzalez comment:6

No, I'm saying that we won't try to fix table displays.