search

smastrom / vue-collapsed

🏋️‍♂️ CSS height transition from any to auto and vice versa for Vue and Nuxt. Accordion ready.
https://vue-collapsed.pages.dev
MIT License
123 stars 8 forks source link

Overflow hidden on default slot prevents from setting correct height on element #25

Closed oleh-selivanov closed 2 months ago

oleh-selivanov commented 3 months ago

Hi, I am trying to create Collapse which contains to parts:

  1. Div with non scrollable content
  2. Div with scrollable content, that should have height of 100% of expanded collapse

I have to set overflow: hidden to all items scrollable content is nested in, but setting overflow: hidden to top item inside collapse make it always 0px height. Maybe I missed something. Thanks in advance

<Collapse>
 <div class="flex flex-col h-full overflow-hidden">
  // This is non scrollable
  <div>...</div>

  // This is scrollable
  <div class="overflow-auto h-full flex flex-col">...</div>
 <div>
</Collapse>
smastrom commented 3 months ago

Hi @oleh-selivanov, I can definitely look into it but I would kindly need you to create a reproduction on Stackblitz.

oleh-selivanov commented 3 months ago

No problem, gonna share it today

oleh-selivanov commented 3 months ago

So here is the demo cc @smastrom https://stackblitz.com/edit/vitejs-vite-ehwszu?file=src%2FApp.vue

smastrom commented 2 months ago

Hi @oleh-selivanov, sorry for getting back now but I've been a bit more busy than usual and thank you for providing the reproduction.

I played a bit with it and yeah, overflow: hidden on a direct child causes the scrollHeight property of the parent (Collapse) to always be equal to 0 even multiple frames after removing display: none from it. That's why the collapse is not expanding nor collapsing as its "expanded" height is expected to be 0.

While I'm still not sure why those DOM APIs acts like this when this occurs, I figured that since this is a very edge case caused by the content (and not by the package) and that it can easily be worked-around (by setting a specific height on the direct child and then overflow: hidden on the next child, for example), I won't implement any hacky solution in vue-collapsed itself that takes care of this. This won't be fair for all the people that uses this package daily and would also push a bit too far its scope.

However, what I can do and will do in the PR I'm merging is that everytime this occurs, vue-collapsed will force the expansion of the collapse container (without playing any transition) so that nobody will ever get stuck in a situation like yours and will actually be able to see the content, edit and test it.

Thank you again for raising the issue and I'll hope you'll keep enjoying this package! Cheers!