#4444 closed bug (fixed)
Accordion - Content disappears with autoHeight set to false in IE 6
| Reported by: | MikaJ | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.8 |
| Component: | ui.accordion | Version: | 1.7.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
If you set an accordion's autoHeight=false and the content area has an <a> tag, that tag will disappear once you open that section of the accordion.
Only in IE6. Firefox doesn't exhibit this problem.
Sample:
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Accordion - No Auto Height</title>
<link rel="stylesheet" href="http://static.jquery.com/ui/css/base2.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
autoHeight: false
});
});
</script>
</head>
<body>
<div class="demo">
<div id="accordion" >
<h3><a href="#">Section 1</a></h3>
<div >
Accordion Content 1<br>
<a href="#">Link Test #1</a>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<a href="#" >Accordion Content 2</a>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Accordion Content 3 </p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</div><!-- End demo -->
</body>
</html>
Change History (5)
comment:1 Changed 14 years ago by
| Milestone: | TBD → 1.8 |
|---|
comment:2 Changed 14 years ago by
comment:3 Changed 14 years ago by
The generic solution is to use:
.ui-accordion-content{ zoom: 1; }
This should be added into the default stylesheet for the accordian ui. Nice catch kbwood!
comment:5 Changed 14 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
Fixed in r3039. This also seemed to fix a lot of flickering in IE6.
Note: See
TracTickets for help on using
tickets.
I had the same problem with input fields. It was solved by forcing "layout" on the content divs with
.contentDiv {
}