Clicking an accordion in a list overlaps the existing items

[arunmmanoharan]

Hi, I am using react-virtual to render a list of accordion elements. When the accordion is collapsed, the list looks great. When I expand one accordion, it flows into the other accordions. How do I fix it in a way that the other items automatically go below the opened accordion?

This is my stackblitz link.

Expected behavior: Similar to this.

Please advice.

[DaniAkash]

React Virtual has a measureElement function in the virtualRow object. You have to call this measure element everytime your accordion opens or closes

Here's a working example with Headless UI's collapsible component: https://codesandbox.io/s/dynamic-resize-disclosure-forked-4vwnn7?file=/src/VirtualRow.tsx