CODEWITHSUNDEEP
cssreactjsscrollbardevextreme
TomR
TomR

Reputation: 3056

Why Devextreme grid is overflowing its parent container and why it is not creating vertical scrollbars?

I have (https://codesandbox.io/s/9zok7jx4ro) the Devextreme grid with large number of items (the following codes shows only some of them) and the problem is that grid is overflowing the div element which contains this grid. I would like to ask the grid to create inner scrollbars and to respect the available space that is provided by the containing div elements. How can I do this?

I have the following code:

import React from "react";
import ReactDOM from "react-dom";
import {
  Grid,
  Table,
  TableHeaderRow
} from "@devexpress/dx-react-grid-bootstrap4";
import "@devexpress/dx-react-grid-bootstrap4/dist/dx-react-grid-bootstrap4.css";
import "./styles.css";

//

function App() {
  return (
    <div className="App">
      <Grid
        className="grid"
        rows={[
          { id: 0, product: "DevExtreme", owner: "DevExpress" },
          { id: 1, product: "DevExtreme Reactive", owner: "DevExpress" },
          { id: 2, product: "DevExtreme", owner: "DevExpress" },
          { id: 3, product: "DevExtreme Reactive", owner: "DevExpress" },
          { id: 4, product: "DevExtreme", owner: "DevExpress" },
]}
        columns={[
          { name: "id", title: "ID" },
          { name: "product", title: "Product" },
          { name: "owner", title: "Owner" }
        ]}
      >
        <Table />
        <TableHeaderRow />
      </Grid>
    </div>
  );


html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

#root {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.App {
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: sans-serif;
  text-align: center;
  background-color: rosybrown;
}

.grid {
  width: 100%;
  height: 100%;
  background-color: magenta;
}

Upvotes: 0

Views: 2215

Answers (1)

Robert
Robert

Reputation: 2543

You have to give the grid some height(in pixels) if you want it to show vertical scrollbars. This is the case with most UIs and not just with Devextreme(JS). If you give it 100% height that some element up the DOM hierarchy must have fixed width for this to work.

Upvotes: 1

Related Questions