FixedSizeList padding

[khlieng]

Is there a way to have padding at the top and bottom of a list? If I do 10px 0 on the outer div I get 20px of padding at the bottom, I can make it look proper by adding a 10px top margin to the list items but that just shifts the windowing off-center.

[bvaughn]

No, padding like that isn't really supported within the list. If you want padding around the list, put the list inside of a padded container. 😊

This helps keeps the positioning logic inside of the list as simple as it can be.

[khlieng]

Ah ok, I wanted the padding inside the list like this https://jsfiddle.net/9wpd58mx/6/, I could just do it with a VariableSizeList.

[bvaughn]

Oh, thanks for clarifying. I misunderstood! 😄

Yup, the easiest way to do that would be by adding in "padding" rows– one to the beginning and one to the end of your list.

[ahtcx]

This can be fixed by adding position: relative; to the list, should I make a PR with a fix @bvaughn ?

[henryoliver]

Just subtract a given offset from the grid height:

const HEADER_OFFSET = 72;
...
return (
  <FixedSizeGrid
    ref={photoGridRef}
    width={width}
    height={height - HEADER_OFFSET}
    rowCount={rowCount}
    rowHeight={rowHeight}
    ...