Accordion overflow breaks when displayed inside a dialog on Internet Explorer

[Rich2k]

Hi

I discovered a curious problem when displaying a collapsable accordion inside a dialog on Internet Explorer 7.

When opening an accordion the overflow of the dialog overlaps the dialog buttons at the botom and whilst the scrollbars display it does not function.

From looking in the CSS it was fixed by changing the following

.ui-accordion .ui-accordion-header { cursor: pointer; margin-top: 1px; zoom: 1; }  
.ui-accordion .ui-accordion-header .ui-icon { float:left; margin-top:6px; margin-left: 2px; }   
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; top: 1px; margin-bottom: 2px; overflow: auto; display: none; }  

[Rich2k]

Screenshot under IE7

[scottjehl]

Unfortunately, this breaks our standard for positioning icons appropriately next to text of various font sizes. There's a thread here for more discussion: ​http://groups.google.com/group/jquery-ui-dev/browse_thread/thread/ee29096b1d32ec78#

[scottjehl]

Did you try setting position: relative on the dialog content area? Let us know if that works instead of digging into each plugin's reaction to an overflow auto parent. Might be the easiest way to fix this issue.

[LynXor]

removing "position: relative" fixed for .ui-accordion-content and .ui-accordion-header fixed the problem for me. IE apparently, doesn't interpret position: relative the same way as the rest of the world..

[Scott González]

Fixed in ​cdd6161.

[Scott González]

Dialog: Add positioning for content div. Fixes #4319 - Accordion overflow breaks when displayed inside a dialog on Internet Explorer.

Changeset: cdd6161419190e9d5a1e823f4910559dbab6de7d