React virtualized - Padding bottom on List

Question

I was wondering if there is any way to add a padding bottom at the end of the list. I need this because I have a material floating button over the list, at the bottom. So if the user goes to the end of the list, that padding will save the last item to be covered from the button.

thankyou

Answer 1

Its not a padding, but you could put a margin botton to the div that contains all the items Something like that:

.ReactVirtualized__Grid__innerScrollContainer {
    margin-bottom: 100px;
}

Answer 2

.ReactVirtualized__Grid__innerScrollContainer[style] {overflow:visible !important;}

Version 9 of react-select uses inline styles to set overflow. I used this so the tooltip was seen below the end of the grid (when the grid doesn't take the whole screen). See react select library code snippet:

<div
        className="ReactVirtualized__Grid__innerScrollContainer"
        role={containerRole}
        style={{
          width: autoContainerWidth ? 'auto' : totalColumnsWidth,
          height: totalRowsHeight,
          maxWidth: totalColumnsWidth,
          maxHeight: totalRowsHeight,
          overflow: 'hidden',
          pointerEvents: isScrolling ? 'none' : '',
          position: 'relative',
          ...containerStyle,
}}>

And that is in https://github.com/bvaughn/react-virtualized/blob/438b5672e5364cffa91f21656ee2f04003794ca1/source/Grid/Grid.js#L1058

Answer 3

You could set the height of the last item in your list to include your padding, as rowHeight can be passed a function.

Then all you need to do is style your list items such that the extra height on the last item is empty space, margin bottom or a fixed height on the inner contents would work.

https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types.