React-virtualized: List Padding

[jacobp100]

Is it possible to add internal vertical padding on the list, so the first row appears say 10px down, but in a way that shorten the scrollbar.

So in the example above, when at the top of the list, the first row would be 10px below the top of the scrollbar?

[bvaughn]

No, this isn't supported. My answer to this sort of question has usually been to put this padding in a <div> (or similar) that wraps List. Spacing "between" rows could be accomplished by making the rows a little bit taller and then padding within the rowRenderer. This keeps the positioning logic within RV simpler (and it's already complex enough). 😄

[jacobp100]

I didn't explain this very well, it's easier with an example.

Notice that the background is only visible at the start and end of the list. Using a container with padding would always show the background!

[bvaughn]

Here's an example of how you could do that with react-virtualized

https://codesandbox.io/s/j2px9kpl9y

[jacobp100]

That's one way to do it!

Is this a feature you'd be open for a PR for—maybe via inset{Top,Right,Bottom,Left} props? It's really common in iOS at least to have a insets.

[bvaughn]

You can always submit a PR 😄 I'll be happy to take a look (although it might take me a while).

[smeijer]

@jacobp100, I would be highly interested in this functionality.

I use a top-padding to create "white space" above the list, so a search bar can be positioned absolutely in this whitespace. After scroll, the list-items "disappear" behind the search bar.

Currently fixed with the 'PaddingRow' solution, but an inset prop would be really nice.

[TrySound]

@smeijer @jacobp100 There is WindowScroller component which allows to pass own scrollable html element and register child around Table/List/Grid.

See "Use custom element for scrolling" checkbox in WindowScroller example

[jacobp100]

Thanks! Did a demo on stackblitz: https://stackblitz.com/edit/react-kwjixn?file=index.js

If anybody has any feedback on how to do things better, I'd love to know!

[RyanLiu0235]

Here's what I did to hack:

&:after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #f4f4f4;
}

It works well!

[martis-git]

Still actual!!!