CODEWITHSUNDEEP
react-virtualized
Ayoze Barrera
Ayoze Barrera

Reputation: 126

React virtualized - Padding bottom on List

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

Upvotes: 3

Views: 4758

Answers (3)

Elliot
Elliot

Reputation: 563

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.

Upvotes: 0

marco suarez
marco suarez

Reputation: 1

.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

Upvotes: 0

Jesus
Jesus

Reputation: 752

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

Upvotes: 3

Related Questions