Accordion: Incorrect size when initialized in hidden div

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

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

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

The link to my commit :

http://github.com/dominiquevincent/jquery-ui/commit/207c1ebc4df9b6b652c0d969ec276ab10240c21b

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.

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

http://github.com/dominiquevincent/jquery-ui/commit/f4d802be6531f81113108c7e4dba98fe2c83eab7

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 :

http://forum.jquery.com/topic/widget-with-sub-widgets

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

http://github.com/dominiquevincent/jquery-ui/commit/32b826f1b4970bf98128cbe803b173b8867da4c7

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

#7108 is a duplicate of this ticket.

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.

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

.accordion("resize")

http://jqueryui.com/demos/accordion/#method-resize

not refresh.

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