How to handle item resize ?

[mtancoigne]

Hello and thank you for this library !
I have a question on my implementation: I render a list in which some items are collapsed, and when one expand an item and scroll, the item gets removed even if the content was not fully scrolled:

This is fine if the item is created expanded:

My first thought was to have a kind of callback fired by vue-virtual-scroll-list when the element gets rendered in the list: the element is rendered in its expanded state, then vue-virtual-scroll-list executes a callback (in my case, the element collapses).

Any thought or idea (or maybe something I missed ?)

[mtancoigne]

I tried to trick vue-virtual-scroll-list by expanding the component by default, then collapse it in its $nextTick:

• The behavior is better when scrolling through the expanded section
• The list is broken when the element is removed from the DOM (there is a "hole" in the list, of the same height of the expanded element)

[mtancoigne]

Well, a duck told me "why don't you display the sub-elements in a dropdown, modal, another panel, or even visually replace the list with the sub list ?"... Well, that would remove the problem, but won't fix it.

I'm going to take a look at a possible design in this way, but i'm still interested by the reflexion on the subject.

---

Edit: I finally managed to bypass the issue by visually replacing the list by the sublist. Basically:

parent-component
  main-list (with v-show to hide it but not lose the state. Items emits an event with the data to use in sublist)
  sub-list (with header and "close" button; displayed with a v-if)

[mtancoigne]

Well, i'm closing this.