Solvedreact data grid Chrome v70 breaks horizontal scrolling (reproducible in adazzle demo grids)

Which version of React JS are you using?

☣️ Not officially supported, expect warnings and errors ☣️
- [X] v16.x.x


Which browser are you using?

Officially supported

  • Chrome

I'm submitting a ...

  • 🐛 Bug Report

Issue Details

- What the current behavior is

In Chrome v69 and below, when there are more columns than possible to display on the screen, it is possible to scroll horizontally to see more columns.

- What the desired behavior is

Horizontal scrolling should work.

- (If Bug) Steps to reproduce the issue

  1. Download Chrome v70 (released today, Oct 16) or use Chrome Canary v72, as the issue is present in both.

  2. Load the demo page at http://adazzle.github.io/react-data-grid/#/examples/immutable-data-grouping

  3. Try to scroll horizontally. It does not work.

15 Answers

✔️Accepted Answer

Hey guys, the thing is that Row style uses an experimental css inline property contain: layout by removing this property it will work as expected. You can try by changing inline css in the browser developer tools.
The workaround I'm using is to create a custom RowRenderer using a custom Row.

import { Row } from 'react-data-grid'
import React from 'react'

class CustomRow extends Row {
  render(...args) {
    const superElement = Row.prototype.render.apply(this, args)
    const style = {
      height: this.getRowHeight(this.props),
      overflow: 'hidden'
    }
   // clone the element returned by the superclass (Row)
   // and override its style with one without `contain: 'layout'`
    return React.cloneElement(superElement, { style })
  }
}

export default class CustomRowRenderer extends React.Component {
  setScrollLeft = (scrollBy) => {
    this.row.setScrollLeft(scrollBy);
  }

  render() {
    // using my custom row
    return <CustomRow ref={node => this.row = node} {...this.props} />
  }
}

Usage:

<ReactDataGrid rowRenderer={CustomRowRenderer} />

More Issues: