search

CreativeBulma / bulma-collapsible

Collapsible Extension for Bulma.io - Make any Bulma element collapsible with ease
MIT License
74 stars 11 forks source link

CSS bug: Collapse height transition not working #13

Open melcarthus opened 2 years ago

melcarthus commented 2 years ago

On Bulma 0.9.3. Installed bulma-collapsible via Yarn. Collapsing does not transition, expanding does work.

jeffstark commented 2 years ago

Same issue here. To expand on this, the close animation does work, but only if you close it before the opening animation completes. Once the opening animation completes, the close animation does not work.

jimmyangel commented 2 years ago

I am observing exactly the same issue. Any clues about what may be causing it?

JulioWar commented 1 year ago

Hi there, I noticed this issue and I think there are changes that haven't been published to NPM or Yarn. I managed to get around the issue by doing this:

const collapsableElement = document.getElementById('to-collapse');
const bulmaCollapsibleElement = new bulmaCollapsible(collapsableElement);
bulmaCollapsibleElement._originalHeight = collapsableElement.scrollHeight + 'px'

Let me know if this fix work for you guys

dkalpakchi commented 1 year ago

Hi everyone, and thanks @JulioWar! Building on top of your fix, it might be better to call this fix every time upon expanding:

const collapsibles = bulmaCollapsible.attach();

collapsibles.forEach(function(instance) {
   instance.on('after:expand', function() {
      instance._originalHeight = instance.element.scrollHeight + 'px';
   }); 
});

Seems to work for me and hopefully for anyone else encountering the issue!