Search and Top Navigation
#4902 closed bug (duplicate)
Opened October 07, 2009 10:18PM UTC
Closed January 20, 2010 03:17AM UTC
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 (4)
Changed October 07, 2009 11:00PM UTC by comment:1
Changed October 08, 2009 02:34PM UTC by comment:2
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;
}
});
});
Changed November 17, 2009 12:45PM UTC by comment:3
| milestone: | TBD → 1.8 |
|---|
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.