react-virtualized List: How to remove empty space when the list is too short?

Question

I am using react-virtualized List to render a list of data. When the list is too short (is height is smaller than the "height" prop of List component) there are a lot of empty spaces at the bottom (because the height is fixed). Is there any way to fix this problem?

Answer 1

The fix is to detect when this is the case, and just pass a shorter height value to List.

This is what react-virtualized-selected does for short drop-down lists, for example. You can see the code for that here, although it may be more complicated than what you need because of the fact that it supports variable-height rows.

If your rows are fixed height, then the calculation is much simpler:

const height = Math.min(maxHeight, rowCount * rowHeight);