Responsive Virtual Window

[jkinley]

I have been playing around with the latest release. I still have not been able to figure out how to make this work responsively. Has anyone else been able to accomplish this? In the previous version, I was able to make everything work except it would not update with a viewport change. Now, the list items are over-lapping right from the start.

https://codesandbox.io/s/tanstack-virtual-responsive-jfyt31?file=/src/App.js

[jkinley]

Does anyone know how to accomplish this? It would be really great to have a fully responsive solution without a fixed height.

[ardeora]

Hey there! I think this example would work for you?

https://codesandbox.io/s/tanstack-virtual-responsive-forked-ucclwo?file=/src/App.js

What it basically does is it uses a window resize hook to listen for window width changes and then calls the measure function to recompute the values for the visible rectangles. You can also probably use observeElementRect to do the same but I haven't tested it out yet :D https://tanstack.com/virtual/v3/docs/api/virtualizer#observeelementrect

[jkinley]

Thanks, Ardeora! That's very helpful. I will let you know if I dabble with observeElementRect