Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React-Virtualized Autosizer calculates height as 0 for VirtualScroll

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>
)}
like image 574
JWayne Avatar asked Jul 12 '16 22:07

JWayne


2 Answers

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

like image 153
bvaughn Avatar answered Oct 16 '22 19:10

bvaughn


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.

like image 45
Kyle Pennell Avatar answered Oct 16 '22 19:10

Kyle Pennell