reactjsreact-virtualized

React-Virtualized Autosizer Height Issue

My parent div is 100% of the parent (which is in turn 100%, etc), and one of the parents has some padding.

AutoSizer is not respecting the padding at the bottom, and also the list stops scrolling before all the items have been seen.

<AutoSizer>
  {({ width, height }) => (
    <List
      height={height}
      rowCount={data.length}
      rowHeight={53}
      rowRenderer={this.rowRenderer.bind(this, data)}
      width={width}
    />
  )}
</AutoSizer>

Bottom padding on grandparent is ignored: Bottom padding on grandparent container not respected

Rows stop rendering early: Rows stop rendering early

Solution

  • The second problem you've mentioned indicates that you are not accepting/applying the style property passed to the row renderer. See here for an illustration.

    AutoSizer is not respecting the padding at the bottom

    As for this, it sounds like your CSS isn't setup quite right. Try setting the padding on anything except the immediate parent of AutoSizer. :)