Forums

Hi,

I'm trying to put an accordion into an overlay and have it conditionally displayed when a checkbox is selected and am having two problems:

1) The first time the accordion is shown it isn't causing the overlay to resize and the accordion is rendered beyond the border of the overlay. Opening and closing accordion items of differing heights also does not cause the overlay to resize.

2) Using contentHeight method "auto" does not work. Opening the accordion items shows no content. Changing to a fixed height does work.

Any tips are appreciated.

--Brad

Hi Iliyan,

I have come up with a minimal reproducible example and it can be found at

http://pastebin.ubuntu.com/574016/

In the example, and in real life, we want to close the element containing the accordion based on other action, in the example it is selecting the checkbox. In our actual work, the closing is done using YUI animation so the height of the wrapper transitions to 0 when closed.

The problem demonstrated by the example is after the wrapper has its height set to 0 subsequent calls to get('scrollHeight') return 0 not its true height. I've included in the example another <div> with an <ul> in it to show that it works as expected.

If you look in a console you'll see the values for get('scrollHeight') are printed.

As an attempted work-around I have manually cached 'old-height' as an attribute and retrieve it. This solution is not optimal as the first time the height is forced on the wrapper it breaks the ability of the overly to respond to resizes caused by opening and closing various accordion element. When you first load the example you'll see the accordion and overlay behave nicely together.

Is there an underlying bug in accordion that prevents it from reporting its scrollHeight correctly to its parent? Is there another way I can get that information reliably? Or, do you see something fundamentally wrong in my approach?

Thanks for your help.

Best,

Brad

Thanks for your help Iliyan.

--Brad