Add Gap Between Elements While Using React Virtualized

Issue

I am using React-Virtualized to create a lazy loading infinite list.

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md

However, I am not able to create a gap between the rendered divs, since they are absolutely positioned and top is calculated dynamically.

I’ve tried the following, however no luck.
Any ideas on how to add this gap between each element? Thanks!

<AutoSizer disableHeight>
   {({width}) => (
              <List
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                rowCount={rowCount}
                rowRenderer={rowRenderer}
                width={width - 30}
                rowHeight={175}
                height={this.state.height - 64}
                style={{
                  paddingTop: 15,
                  boxSizing: 'content-box',
                }}
                containerStyle={{
                  position: 'relative',
                  overflow: 'visible',
                }}
              />
    )}
</AutoSizer>

Solution

I ended up solving for the padding by adding a div inside the CellMeasurer as a parent container to provide the padding.

The div is the absolute positioned container, whereas the Card is padded and shows the box shadow.

<CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={key}
      rowIndex={index}
      parent={parent}
    >
      {({ measure }) => (
        <div
          className={s.listItem}
          style={style}
          onLoad={measure}
          key={index}>
            <Card>

Answered By – Yasir

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published