Opened 13 years ago
Closed 13 years ago
#4902 closed bug (duplicate)
Accordion height problems with display:none
Reported by: | nickknw | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | 1.8 |
Component: | ui.accordion | Version: | 1.7.2 |
Keywords: | accordion height display none | Cc: | |
Blocked by: | Blocking: |
Description
Problem:
The first accordion section to be 'opened' does not adjust its height to match its contents, resulting in the contents being obscured or invisible.
This is exacerbated when only one group is visible, as there is nothing the user can do to expand it. When there is more than one group visible, opening another group then opening the first group again will serve as a workaround.
Conditions:
- autoHeight: false is set
- The first Group has a style of display:none
- At least one group in the accordion does NOT have a style of display:none
When this might be a problem:
When a developer would like to dynamically show or hide sections of an accordion based on some other user input (e.g. a select box or something). Also, it looks like this bug is probably related and/or stems from a similar issue: http://dev.jqueryui.com/ticket/3905
I have attached a premade example that reproduces this bug, for anyone that wants to see it for themselves.
Attachments (1)
Change History (5)
Changed 13 years ago by
Attachment: | accordionbug.rar added |
---|
comment:1 Changed 13 years ago by
When using IE8 (maybe IE7 or 6 - not tested) the bug is somewhat more severe. The first accordion section opened remains open when the user clicks on another section. The accordion control is left with two opened sections and then does not respond to any further actions by the user.
comment:2 Changed 13 years ago by
I have had some success using the following code as a workaround, although I grant it is by no means ideal.
accordions.each(function() { index = 0; var first_visible_section_activated = false; $(this).children("h3").each(function(index) { if (($(this).css("display") != "none") && first_visible_section_activated == false) { var accordion = $(this).parent(); accordion.accordion('option', 'collapsible', true); accordion.accordion('option', 'animated', false); accordion.accordion('activate', false); accordion.accordion('activate', index); accordion.accordion('option', 'animated', 'slide'); accordion.accordion('option', 'collapsible', false); first_visible_section_activated = true; } }); });
comment:3 Changed 13 years ago by
Milestone: | TBD → 1.8 |
---|
Example of the bug