Where AutoSizer's width gives me an appropriate value, I'm consistently getting an Autosizer height of 0, which causes the VirtualScroll component not to display. However, if i use the disableHeight prop and provide VirtualScroll with a fixed value for height (i.e. 200px), VirtualScroll displays rows as expected. Can anyone see whats wrong?

Ultimately, the Autosizer is meant to live inside a Material-ui Dialog component, but I have also tried simply rendering the autosizer into a div. Same issue.

render() {
return (
  <Dialog
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}
    contentStyle={pageOptionsDialog.body}
  >
  <div>
    <AutoSizer>
      {({ width, height }) => (
        <VirtualScroll
          id="virtualScroll"
          onRowsRendered={this.props.loadNextPage}
          rowRenderer={this.rowRenderer}
          height={height}
          rowCount={this.props.rowCount}
          rowHeight={30}
          width={width}
        />
      )}
    </AutoSizer>
  </div>
</dialog>
)}

Where AutoSizer's width gives me an appropriate value, I'm consistently getting an Autosizer height of 0, which causes the VirtualScroll component not to display. However, if i use the disableHeight prop and provide VirtualScroll with a fixed value for height (i.e. 200px), VirtualScroll displays rows as expected. Can anyone see whats wrong?

Ultimately, the Autosizer is meant to live inside a Material-ui Dialog component, but I have also tried simply rendering the autosizer into a div. Same issue.

render() {
return (
  <Dialog
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}
    contentStyle={pageOptionsDialog.body}
  >
  <div>
    <AutoSizer>
      {({ width, height }) => (
        <VirtualScroll
          id="virtualScroll"
          onRowsRendered={this.props.loadNextPage}
          rowRenderer={this.rowRenderer}
          height={height}
          rowCount={this.props.rowCount}
          rowHeight={30}
          width={width}
        />
      )}
    </AutoSizer>
  </div>
</dialog>
)}

• javascript
• material-ui
• react-virtualized

2 Answers 2

This typically means you haven't set the parent's styles correctly.

In the snippet you posted, the parent is a <div>, which by default is a "block" element- meaning it fills the full width automatically. However block elements have no native/default height so AutoSizer reports a height of 0.

To fix this, just set a style on the <div> of either height: 100% or flex: 1 etc. The <div> should then grow and AutoSizer will report a height > 0.

Checkout the docs too to avoid other similar gotchas: * https://github.com/bvaughn/react-virtualized/blob/master/docs/AutoSizer.md#examples * https://github.com/bvaughn/react-virtualized/blob/master/docs/usingAutoSizer.md

Hoping this helps future people. I had a pointless parent div around AutoSizer

<div style={{ height: height || '100%', minWidth: "20vw" }}>

Chrome and firefox were fine with it but safari didn't render anything. Removing it seems to have fixed it all.