Opened 9 years ago

Closed 7 years ago

Last modified 7 years ago

#4319 closed bug (fixed)

Accordion overflow breaks when displayed inside a dialog on Internet Explorer

Reported by: Rich2k Owned by:
Priority: minor Milestone: 1.8.3
Component: ui.accordion Version: 1.7
Keywords: Cc:
Blocked by: Blocking:

Description

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; }  

Attachments (1)

jqueryaccordionbug.png (14.1 KB) - added by Rich2k 9 years ago.
Screenshot under IE7

Download all attachments as: .zip

Change History (9)

Changed 9 years ago by Rich2k

Attachment: jqueryaccordionbug.png added

Screenshot under IE7

comment:1 Changed 9 years ago by rdworth

Component: ui.coreui.accordion

comment:2 Changed 9 years ago by Scott González

Milestone: TBD1.8

comment:3 Changed 9 years ago by 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#

comment:4 Changed 9 years ago by 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.

comment:5 Changed 9 years ago by 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..

comment:6 Changed 7 years ago by Scott González

Resolution: fixed
Status: newclosed

Fixed in cdd6161.

comment:7 Changed 7 years ago by Scott González

Milestone: 1.91.8.3

comment:8 Changed 7 years ago by Scott González

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

Changeset: cdd6161419190e9d5a1e823f4910559dbab6de7d

Note: See TracTickets for help on using tickets.