Opened 13 years ago

Closed 11 years ago

Last modified 11 years ago

#3905 closed bug (wontfix)

Accordion: Incorrect size when initialized in hidden div

Reported by: angelo.impedovo Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.accordion Version: 1.8
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Scott González)

When initializing an accordion in a hidden div, the size is calculated incorrectly.

Attachments (1)

accordion_tabs.html (2.9 KB) - added by dominiquevincent 12 years ago.
Test file showing that the autoHeight is not done on hidden accordion

Download all attachments as: .zip

Change History (15)

comment:1 Changed 13 years ago by paul


comment:2 Changed 13 years ago by JustinN

I have found the exact same bug.

When the container of the accordion is set to display:none when creating the accordion, the accordion does not display properly, and throws scripting errors in IE (but not in FF).

However, if you use visibility:hidden, when you change the visibility back, the accordion renders perfectly, no problems, however the jQuery UI.Tabs render incorrectly. What happens with the tabs:

The tabs load and work fine, however the first display tab is the only one to appear ok, but if you select any other tab, the background color for the next tab displays incorrectly (perhaps a class does not get set?), however if you re-select the first tab, and then select the same tab which originally had an issue displaying the first time, it will display correctly the second time. This will occur for each of the tabs (excluding tab index 0).

From further examination, it appeares display:none only breaks the accordion. Unfortunately, I do not have time to investigate the cause/solution for this bug, so any help from the jQuery UI team or fellow contributors would be appreciated.

Kind Regards, Justin

comment:3 Changed 12 years ago by Scott González

Milestone: 1.next1.8
Priority: minormajor
Summary: Accordion doesn't start in a div.display:noneAccordion: Incorrect size when initialized in hidden div

comment:4 Changed 12 years ago by Jörn Zaefferer

Priority: majorcritical
Version: 1.6rc51.8

Still an open issue. See tests/visual/compound/accordion_tabs.html for a visual test, check the second tab.

comment:5 Changed 12 years ago by dominiquevincent

When the accordion is hidden, the maxHeight calculation (in function resize) returns 0. The calculation is using jquery height() function, that is using offsetHeight. This property is equal to 0 when the element has display set to none.

I inserted a test to make the calculation only when the accordion is visible. This modification fixed the problem for the sample: tests/visual/compound/accordion_tabs.html It seems that the calculation of the height isn't required in this sample.

But it could be required in other cases, so more tests need to be done in order to see if it's really enough or if we need to make the height calculation later.

The fix has been sent to scott.gonzalez using github.

Regards, Dominique

Changed 12 years ago by dominiquevincent

Attachment: accordion_tabs.html added

Test file showing that the autoHeight is not done on hidden accordion

comment:7 Changed 12 years ago by dominiquevincent

I made more tests, the autoHeight on the hidden accordion is not done using the fix that I made. The attachment "accordion_tabs.html" shows that the height of the second accordion is not calculated. The fix is better than nothing because with it the accordion is visible. But the functionality autoHeight is not applied.

There are several solutions :

1- set a status when the autoHeight process is not done, and handle a show event in order to make the autoHeight process at this time.

2- force the accordion to be visible in the current DOM before making the autoHeight calculation process.

3- clone the accordion somewhere in the DOM, make the clone visible, make the calculation on the clone, remove the clone, set the maxHeight value in the accordion

Questions :

Solution 1:

  • Do we have an event that is triggered when the widget becomes visible ?

Solution 2:

  • It's not easy to go up in the widget chain in order to make the accordion visible. We can have several levels of tabs using sub-tabs ... It seems complex to make it working.

Do we have already in the ui library such process ?

Solution 3:

  • It could work but the user will probably see a visual effect when calculation is done on the clone.

comment:8 Changed 12 years ago by dominiquevincent

I implemented a fix using tabsshow event. The code is available here :

This code works for accordion in a tab. But it doesn't work for an accordion in another accordion. The file accordion_tabs.html in the commit shows the case of sub-accordion .

A post about this problem is available here :

comment:9 Changed 12 years ago by dominiquevincent

The commit of the code working with hidden accordion by any plugin is here :

The solution is using setTimeout to make the height calculation when the accordion becomes visible.

comment:10 Changed 12 years ago by Scott González

Description: modified (diff)
Priority: criticalminor

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

#7108 is a duplicate of this ticket.

comment:12 Changed 11 years ago by Scott González

Resolution: wontfix
Status: newclosed

This issue will not be fixed. The proper solution is to call .accordion( "refresh" ) once the accordion becomes visible. A few workarounds have been proposed, but not of them work in all cases.

comment:13 Changed 11 years ago by rtpmatt

I just want to say for anybody else who is running into this, I believe it is


not refresh.

comment:14 Changed 11 years ago by Scott González

Thanks rtpmatt. You're correct, the current method is resize, in 1.9 it will change to refresh (it's already changed in master).

Note: See TracTickets for help on using tickets.