Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#8020 closed bug (wontfix)

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>            

Change History (6)

comment:1 Changed 8 years ago by gunnicom

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

Last edited 8 years ago by gunnicom (previous) (diff)

comment:2 Changed 8 years ago by Scott González

Owner: set to 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.

comment:3 Changed 8 years ago by gunnicom

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

Last edited 8 years ago by gunnicom (previous) (diff)

comment:4 Changed 8 years ago by Scott González

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.

comment:5 Changed 8 years ago by gunnicom

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 ...

comment:6 Changed 8 years ago by Scott González

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

Note: See TracTickets for help on using tickets.