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 comment:1
| _comment0: | Forgot to mention: In Internet-Explorer 8 this does not happen. → 1326720940486147 |
|---|
Changed January 16, 2012 01:39PM UTC by comment:2
| owner: | → gunnicom |
|---|---|
| status: | new → 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.
Changed January 16, 2012 05:01PM UTC by 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/etujoy → 1326733597782555 |
| _comment2: | How should i provide the test case? I dont understand the jsFiddle or jsbin thingies. \ Do you mean like this: \ \ http://jsbin.com/etujoy → 1326733630300519 |
| _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/2 → 1326733696538907 |
| _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/3 → 1326734187473723 |
| status: | pending → 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:
Changed January 16, 2012 05:32PM UTC by comment:4
| resolution: | → wontfix |
|---|---|
| status: | new → closed |
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 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 comment:6
No, I'm saying that we won't try to fix table displays.
Forgot to mention: In Internet-Explorer 8 this does not happen, but same bug with google chrome.