Scroll Not Working: react-grid-layout: 0-showcase example

Question

I'm trying to replicate the 0-showcase example of react-grid-layout, everything is working fine except that, the main HTML element which contains the grid and its components, isn't scrollable. I've tried giving overflow-y scroll to body and to subsequent elements, but to no avail. I'm using Gastsby Static Site Generator to speed up development. So inside my pages directly in the Gastby folder structure, I created a grid.js file which contains the following react code. Almost everything is as defined in the example code here. This might a small CSS fix that I'm not getting, but I'm really not understanding what I'm missing here. Thanks in advance!

import React, {PropTypes} from 'react'
import {Responsive, WidthProvider} from 'react-grid-layout';
import lomap from 'lodash.map'
import loresult from 'lodash.result'
import lorange from 'lodash.range'
import lorandom from 'lodash.random'

import "../node_modules/react-grid-layout/css/styles.css"
import "../node_modules/react-resizable/css/styles.css"

const ResponsiveReactGridLayout = WidthProvider(Responsive)

// const originalLayouts = getFromLS('layouts') || {}

function generateLayout() {
  return lomap( lorange(0, 25), function (item, i) {
    var y = Math.ceil(Math.random() * 4) + 1;
    return {
      x: lorandom(0, 5) * 2 % 12,
      y: Math.floor(i / 6) * y,
      w: 2,
      h: y,
      i: i.toString(),
      static: Math.random() < 0.05
    };
  });
}

export default class MyLayout extends React.Component {

  // static propTypes = {
  //   onLayoutChange: PropTypes.func.isRequired
  // }

  static defaultProps = {
    className: "layout",
    rowHeight: 30,
    cols: {lg: 12, md: 10, sm: 6, xs: 4, xxs: 2},
    initialLayout: generateLayout()
  }

  state = {
    currentBreakPoint: 'lg',
    mounted: false,
    layouts: {lg: this.props.initialLayout}
  }

  constructor(props, context){
    super(props, context)
  }

  componentDidMount() {
    this.setState({
      mounted: true
    })
  }

  generateDOM() {

    const styles = {
      background: "#eee"
    }

    return lomap(this.state.layouts.lg, (l, i) => {
      return (
        <div style={styles} key={i} className={l.static ? 'static': ''}>
          {
            l.static ? 
              <span className="text" title="This item is static and can't be removed or resized">
                static - {i}
              </span> :
              <span className="text">{i}</span> 
          }
        </div>
      )
    })
  }

  onBreakPointChange(breakpoint) {
    this.setState({
      currentBreakPoint: breakpoint
    })
  }

  onLayoutChange(layout, layouts) {
    // this.props.onLayoutChange(layout, layouts)
    console.log(layout, layouts);
  }

  onNewLayout() {
    this.setState({
      layouts: {
        lg: generateLayout()
      }
    })
  }

  render() {
    return (
      <div>
        <div>Current Breakpoint: {this.state.currentBreakpoint} ({this.props.cols[this.state.currentBreakpoint]} columns)
        </div>
        <button onClick={this.onNewLayout}>Generate New Layout</button>
        <ResponsiveReactGridLayout
          {...this.props}
          layouts={this.state.layouts}
          onBreakpointChange={this.onBreakpointChange}
          onLayoutChange={this.onLayoutChange}
          // WidthProvider option
          measureBeforeMount={false}
          // I like to have it animate on mount. If you don't, delete `useCSSTransforms` (it's default `true`)
          // and set `measureBeforeMount={true}`.
          useCSSTransforms={this.state.mounted}>
          {this.generateDOM()}
        </ResponsiveReactGridLayout>
      </div>
    )
  }
} 

Answer 1

I am also facing same issue so I imported the css and it worked.

import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';

try this may be it will work for you

Answer 2

It was a very silly question. I had just had to do

body {
  overflow: auto
}

and give height to my react-grid-layout component

render() {
    const styles = {
      height: "100vh" // just this!
    }
    return (
      <div>
        <div>Current Breakpoint: {this.state.currentBreakpoint} ({this.props.cols[this.state.currentBreakpoint]} columns)
        </div>
        <button onClick={this.onNewLayout}>Generate New Layout</button>
        <ResponsiveReactGridLayout
          style={styles} // AND THIS!
          {...this.props}
          layouts={this.state.layouts}
          onBreakpointChange={this.onBreakpointChange}
          onLayoutChange={this.onLayoutChange}
          // WidthProvider option
          measureBeforeMount={false}
          // I like to have it animate on mount. If you don't, delete `useCSSTransforms` (it's default `true`)
          // and set `measureBeforeMount={true}`.
          useCSSTransforms={this.state.mounted}>
          {this.generateDOM()}
        </ResponsiveReactGridLayout>
      </div>
    )
  }