React-Grid-Layout elements handle jumps if there are other elements in the app root in react app

Question

My React-Grid-Layout elements handle jumps if there are other elements in the app root in my react app. If I remove the navbar component above the responsive grid layout I am able to click and drag properly, otherwise, when I try to click on the responsive grid layout element it jumps down.

Here's my code:-

App.js

import React from 'react';
import './App.css';
import '@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css';
import PyfinNavbar from './components/navbar';
import HomeView from './home';
import PyfinResponsiveGrid from './ResponsiveGridLayout';

function App() {
  return (
      <div className="App">
        <PyfinNavbar></PyfinNavbar>
        <HomeView></HomeView>
        <PyfinResponsiveGrid></PyfinResponsiveGrid>
      </div>
  );
}

export default App;

PyfinResponsiveGridLayout.jsx

import React from "react";
import { Responsive as ResponsiveGridLayout } from "react-grid-layout";
import PyfinGrid from "./grid";
let layouts = {
    lg: [
        { h: 2, w: 2, x: 0, y: 0 },
        { h: 2, w: 2, x: 1, y: 0 },
        { h: 2, w: 2, x: 2, y: 0 },
        { h: 2, w: 2, x: 3, y: 0 }
    ],
    sm: [
        { h: 2, w: 2, x: 0, y: 0 },
        { h: 2, w: 2, x: 1, y: 0 },
        { h: 2, w: 2, x: 2, y: 0 },
        { h: 2, w: 2, x: 3, y: 0 }
    ],
    md: [
        { h: 2, w: 2, x: 0, y: 0 },
        { h: 2, w: 2, x: 1, y: 0 },
        { h: 2, w: 2, x: 2, y: 0 },
        { h: 2, w: 2, x: 3, y: 0 }
    ],
    xs: [
        { h: 2, w: 2, x: 0, y: 0 },
        { h: 2, w: 2, x: 0, y: 1 },
        { h: 2, w: 2, x: 0, y: 2 },
        { h: 2, w: 2, x: 0, y: 3 }
    ],
    xxs: [
        { h: 2, w: 2, x: 0, y: 0 },
        { h: 2, w: 2, x: 0, y: 1 },
        { h: 2, w: 2, x: 0, y: 2 },
        { h: 2, w: 2, x: 0, y: 3 }
    ]
};

class PyfinResponsiveGrid extends React.Component {
    render() {
        return (
            <ResponsiveGridLayout
                className="layout"
                layouts={layouts}
                breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
                cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
            >
                <div className="widgetborder" key="1">
                    <PyfinGrid></PyfinGrid>
                </div>
            </ResponsiveGridLayout>
        );
    }
}

export default PyfinResponsiveGrid;

grid.jsx

import React from "react";

import { PagingState, IntegratedPaging } from "@devexpress/dx-react-grid";
import {
    Grid,
    Table,
    TableHeaderRow,
    PagingPanel
} from "@devexpress/dx-react-grid-bootstrap4";
import customers from "./customers";
const GridView = () => (
    <Grid
        rows={customers}
        columns={[
            { name: "customerID", title: "ID" },
            { name: "companyName", title: "Company" },
            { name: "contactName", title: "Name" },
            { name: "contactTitle", title: "Title" },
            { name: "address", title: "Address" }
        ]}
    >
        <PagingState defaultCurrentPage={0} pageSize={1} />
        <IntegratedPaging />
        <Table />
        <TableHeaderRow />
        <PagingPanel />
    </Grid>
);

class PyfinGrid extends React.Component {
    state = {};
    render() {
        return (
            <div>
                <GridView></GridView>
            </div>
        );
    }
}

export default PyfinGrid;

Basically I am trying to create something like https://www.bitmex.com/app/trade/XRPH20 It uses the same gridlayout control but when I use devextreme react grid in the layout the above mentioned problem happens.

Answer 1

This solved the issue for me - see comment.

.react-grid-layout {
  position: relative;
}