Skip to main content

Search and Top Navigation

#3905 closed bug (wontfix)

Opened January 22, 2009 01:15PM UTC

Closed March 28, 2011 08:53PM UTC

Last modified May 31, 2011 05:08PM UTC

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

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

Attachments (1)
  • accordion_tabs.html (2.9 KB) - added by dominiquevincent May 07, 2010 11:45AM UTC.

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

Change History (14)

Changed January 26, 2009 04:42PM UTC by paul comment:1

milestone: TBD1.next

Changed April 09, 2009 07:42AM UTC by JustinN comment:2

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

Changed January 20, 2010 03:17AM UTC by scottgonzalez comment:3

milestone: 1.next1.8
priority: minormajor
summary: Accordion doesn't start in a div.display:noneAccordion: Incorrect size when initialized in hidden div

Changed March 20, 2010 08:39PM UTC by jzaefferer comment:4

milestone: 1.81.8.1
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.

Changed May 06, 2010 08:13PM UTC by dominiquevincent comment:5

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 May 06, 2010 08:37PM UTC by dominiquevincent comment:6

Changed May 07, 2010 12:03PM UTC by dominiquevincent comment:7

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.

Changed May 09, 2010 05:15PM UTC by dominiquevincent comment:8

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

Changed May 11, 2010 08:41PM UTC by dominiquevincent comment:9

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.

Changed July 12, 2010 12:27PM UTC by scottgonzalez comment:10

description: i tried to use the ui-accordion in a div.display:none \ \ but when the is display:block the accordion doesn't start \ \ what' the problem....?When initializing an accordion in a hidden div, the size is calculated incorrectly.
priority: criticalminor

Changed March 14, 2011 12:27PM UTC by scottgonzalez comment:11

#7108 is a duplicate of this ticket.

Changed March 28, 2011 08:53PM UTC by scottgonzalez comment:12

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.

Changed May 31, 2011 03:22PM UTC by rtpmatt comment:13

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.

Changed May 31, 2011 05:08PM UTC by scottgonzalez comment:14

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