Ticket #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: | ||
| Blocking: | Blocked by: |
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
comment:2 Changed 17 months ago by scott.gonzalez
- Owner set to gunnicom
- Status changed from new to pending
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 17 months ago by gunnicom
- Status changed from pending to new
How should i provide the test case? I dont understand the jsFiddle or jsbin thingies. Do you mean like this:
And here you can see the difference in the first content if none was active in the beginning:
comment:4 Changed 17 months ago by scott.gonzalez
- Status changed from new to closed
- Resolution set to wontfix
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 17 months 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 ...
Forgot to mention: In Internet-Explorer 8 this does not happen, but same bug with google chrome.