React-window: How to stop rendering empty space

[raghvendradeshpande]

I have used VariableSizeGrid to render contents in grid format, I set height to 400 but when there are less number of rows, grid displays empty space at the bottom. Is there way to remove empty rows space.

Attached screenshot for details.

[bvaughn]

Just to clarify, it doesn't actually "display empty rows". There's just empty space there.

There is actually no way (currently) to tell a list or grid to automatically shrink if they don't have enough content. I didn't add this functionality because windowing components are not usually used to display small amounts of data.

For fixed-size lists and grids, this can be done in user space pretty easily, but it's a bit harder for variable sized ones...

It wouldn't be hard to add support for this, so maybe it's worth doing. Let me think on it a bit.

[raghvendradeshpande]

Thank you Brian for your reply, It would be worth if we can fix spacing issue.

[donatoaguirre24]

Hi, I have a newbie question. I run into a similar issue. I have a FixedSizeGrid wrapped around an AutoSizer so the number of columns depends on the current width. When the width isn’t enough to display another column the grid looks misaligned. How can I center the grid or achieve something similar in order to improve the UI??

Codesandbox demo: https://codesandbox.io/s/0xjmx220lp

Attached screenshot for details.

[bvaughn]

@donatoaguirre24 Something like this https://codesandbox.io/s/jjkz5y130w

[donatoaguirre24]

@donatoaguirre24 Something like this https://codesandbox.io/s/jjkz5y130w

Thanks!! I really appreciate your quick response. Worked perfectly 👍🏻