Restore height state at expand instead of setting it to a fixed value

[drake7707]

Expanded elements become non-responsive due to the height being set to a fixed value. Better would be to store the state of the element style height before it is collapsed and restore it to that state when the element is expanded again.

[CreativeBulma]

Hi @drake7707 ,

the height is set to element.scrollHeight on expand. How storing the state of element style height before collapsing will handle this ? If the element as no style height or auto style height it will not work: we can't animate using CSS an element with height: auto

If you have any idea how to handle your issue, please share it ;-)

[drake7707]

Would setting the height property element.scrollHeight only for the duration of the animation help? Then when the animation is finished revert the height property to its initial state?

Something like expand:

• oldState = element.style.height
• element.style.height = element.scrollHeight
• add the class for animation
  • window.setTimeout(() => element.style.height = oldState, duration_of_animation)

[CreativeBulma]

Its an idea. I'll try and let you know. But this means transitions are not pure css anymore cause the javascript part needs to know the duration of the animation.

[drake7707]

It might be possible to use the transitionend and/or animationend event instead of window.setTImeout: https://davidwalsh.name/css-animation-callback

[CreativeBulma]

You're right :-D

[CreativeBulma]

@drake7707 : can you share a demo (via codepen or other) on which you were facing the issue ? I've implemented the fix and I'd like to test it

The documentation integrates the issue.

One thought: CSS part is applying height: 0 so any element as original height set to 0 when JavaScript runs. How to get the real original height value ?

[CreativeBulma]

@drake7707 : can you share a demo (via codepen or other) on which you were facing the issue ? I've implemented the fix and I'd like to test it

The documentation integrates the issue.

One thought: CSS part is applying height: 0 so any element as original height set to 0 when JavaScript runs. How to get the real original height value ?

The height: 0 rule is not required in CSS cause the javascript will set it if element not active.

[CreativeBulma]

Okay the fix is working except in one context: on the page load if element is set as active by default the transionend event is not fired. I'll keep looking to fix it before committing

[rlsokel]

I was able to reset the value to it's starting value by replacing the variable this._originalHeight with 'initial'. The collapsible now expands to the original height without the animation issue.