CellMeasurer notes: causes of height measurement errors, and how to fix them.

CellMeasurer renders each cell outside of the table context, and hence does not apply any inherited styling from outer elements. This kind of issue can sometimes be hard to debug. An approach I’ve used is to dump Window.getComputedStyle() on both the CellMeasurer and the visible version of cells at issue, and diff them. This requires using a breakpoint in CellMeasurer’s “measureCell”, since the hidden renderings are transient. [If other users need to do this also, an enhancement that makes the hidden renderings accessible to a handler might be useful.]

Another source of errors is vertical alignment. This may only occur with table layout. If different cells have different alignment, the vertical space required for a row can be larger than that measured for any single cell. Similarly, a baseline-aligned large image in one cell can require space above the first row of text in other cells, and thus forces padding that is not counted other cells’ sizes. If one of these other cells is the tallest cell in the row (e.g. multiple lines), it will not count the image size above the top line’s lineHeight. I’ve been able to work around this by using consistent top alignment. There might be a way for CellMeasurer to measure this vertical-alignment-forced padding and correct for it, but I haven’t dug into it.

[misha-panyushkin]

@estaub, @nsuthar0914 you should better use container option and pass it into cell-measurer. I run into a problem of this kind and found easy to pass appropriate container node to handle css styles inheritance for correct height calculations. In my case it was List element itself:

<CellMeasurer
    {...cellMeasurerProps}
    container={() => this.listInstanceRef}
>
    {({ getRowHeight }) => {
        return (
            <List
                ref={ref => this.listInstanceRef = ref}
                rowHeight={getRowHeight}
                {...listProps}
            />
        )
    }}
</CellMeasurer>

[nsuthar0914]

@estaub @bvaughn @misha-panyushkin i couldn’t get cellmeasurer to give the heights that i wanted the first time, so i simply added another list to get and set heights on componentdidmount and onScroll –

  componentDidMount() {
    this.handleResizeWidth();
  }

  handleResizeWidth() {
    let that = this;
    setTimeout(function() {
      that.itemHeights = that.list.map((listItem, index) => {
        let item = document.getElementById(`item-${index}`);
        if (item) {
          return item.clientHeight;
        } else {
          return null;
        }
      });
      that.cellmeasurer && that.cellmeasurer.resetMeasurements();
      that.grid && that.grid.recomputeGridSize();
    }, 10);
  }

  handleScroll() {
    let heightsToBeUpdated = false;
    this.itemHeights && this.itemHeights.forEach((listItem, index) => {
      let item = document.getElementById(`item-${index}`);
      if (!listItem && !!item) {
        this.itemHeights[index] = item.clientHeight;
        heightsToBeUpdated = true;
      }
    });
    if (heightsToBeUpdated) {
      this.cellmeasurer && this.cellmeasurer.resetMeasurements();
      this.grid && this.grid.recomputeGridSize();
    }
  }

It isn’t elegant at all and if i have like 100 of my heavy list item components in the list and scroll too fast, there is flickering. But this will have to do for now, i guess.