react-virtualized: 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.

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 18 (6 by maintainers)

Most upvoted comments

@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>

misha-panyushkin on Jan 21, 2017