Skip to main content

Search and Top Navigation

#8977 closed bug (patcheswelcome)

Opened January 17, 2013 11:21PM UTC

Closed February 08, 2013 08:56PM UTC

Accordion: Visually broken in IE7 within an overflow: auto/scroll parent

Reported by: johntrepreneur Owned by:
Priority: minor Milestone: 1.11.0
Component: ui.accordion Version: 1.9.2
Keywords: Cc:
Blocked by: Blocking:
Description

The JQuery UI Accordion widget doesn't work with longer scrollable content in IE7 when any parent container div has ''overflow:auto;'' set on it. I tried setting the innermost child div of the Accordion to ''overflow:visible !important;''

but it didn't work. Works fine in IE8, IE9, IE9 compatibility mode, Chrome, FF, Opera, and Safari.

Test this fiddle in IE7. Be sure to explicity set IE to use "Browser mode: IE7" and "Document Mode: IE7 standards".

Any workarounds?

<div style="overflow:auto;">

<div id="accordion" style="overflow:visible;float:right;height:400px;width:500px;border:2px solid red;float:right;">

<h3>Section 1</h3>

<div>

<script type="text/javascript">

for (var i=0; i<10; i++)

{

document.write("<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>");

document.write("<ul>");

document.write("<li>List item one</li>");

document.write("<li>List item two</li>");

document.write("<li>List item three</li>");

document.write("</ul>");

}

</script>

</div>

<h3>Section 2</h3>

<div>

<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>

</div>

</div>

</div>

Attachments (0)
Change History (3)

Changed January 18, 2013 02:48AM UTC by tj.vantoll comment:1

milestone: none1.11.0
status: newopen
summary: Accordion broken in IE7 when embedded in parent container with overflow:auto setAccordion: Visually broken in IE7 within an overflow: auto/scroll parent

Minified - http://jsfiddle.net/tj_vantoll/tfHVA/8/. This is some crazy IE7 CSS bug that I can't figure out how to workaround at the moment.

In the demo if you click on Section 1, the Section 2 header will leave the container and go to the bottom of the screen. If you click on the header it will randomly fix itself.

Changed February 01, 2013 01:32AM UTC by scottgonzalez comment:2

From Tony Ross:

Not sure what the best workaround for you is, but it looks like having "position: relative" on the H3s of the accordion is what triggers the issue (when combined with "overflow: auto"). Just toggling this off fixes the weird behavior, but of course messes up the triangle icons used to show the expanded/collapsed state since they use "position: absolute". Using floats and/or negative margins on the icons instead of absolute positioning would probably get you close to your original design without triggering the problem.

Changed February 08, 2013 08:56PM UTC by scottgonzalez comment:3

resolution: → patcheswelcome
status: openclosed

At this point, we're not going to invest any more time into searching for a workaround that we're comfortable implementing. If anyone has a proposed fix, we'll gladly review a pull request.