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

score 3 · Accepted Answer · answered Jan 04 '17 at 12:30

3

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;
}

answered Jan 04 '17 at 12:30

Jesus

752
7
5

1

I'm trying to avoid css, but this could work so... at the moment, this is the best solution found. – Ayoze Barrera Jan 04 '17 at 12:33

score 0 · Answer 2 · edited Jun 21 '18 at 14:31

.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

score 0 · Answer 3 · answered Feb 14 '19 at 13:28

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.

React virtualized - Padding bottom on List

3 Answers3