[data grid] Height Set Using Percentages doesn't display as expected

[lisaWriteJava]

The problem in depth

HI I have a grid: https://react-nqs1xg-un48pi.stackblitz.io and setting it to percent doesn't seem to change the height with the screen. 5% seems to be the same as 10 %. I'd like the loading to show no matter the size and the grid height to be relative to the screen size.

Your environment

`npx @mui/envinfo`

``` Chrome Browser System: OS: Linux 3.10 CentOS Linux 7 (Core) Binaries: Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node npm: 7.24.2 - ~/node_modules/.bin/npm pnpm: Not Found Browsers: Chrome: 120.0.6099.71 npmPackages: @emotion/react: latest => 11.11.3 @emotion/styled: latest => 11.11.0 @mui/base: 5.0.0-beta.32 @mui/core-downloads-tracker: 5.15.5 @mui/icons-material: ^5.15.3 => 5.15.5 @mui/lab: ^5.0.0-alpha.159 => 5.0.0-alpha.161 @mui/material: ^5.15.3 => 5.15.5 @mui/private-theming: 5.15.5 @mui/styled-engine: 5.15.5 @mui/styles: ^5.15.3 => 5.15.5 @mui/system: 5.15.5 @mui/types: 7.2.13 @mui/utils: ^5.15.4 => 5.15.5 @mui/x-data-grid: 6.19.1 @mui/x-data-grid-generator: ^6.16.2 => 6.19.1 @mui/x-data-grid-premium: ^6.19.1 => 6.19.1 @mui/x-data-grid-pro: 6.19.1 @mui/x-license-pro: ^6.10.2 => 6.10.2 @types/react: 17.0.75 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: latest => 6.1.8 ```

Search keywords: datagrid height Order ID: 66765

[michelengelen]

Hey @lisaWriteJava

The data grid works great when its container has intrinsic/specific sizes, like a set width or height. This might feel like an issue with the grid itself, but it's just how CSS works in this case.

Here's why: Imagine the container as a box. Without a set height, it acts like a regular box that can stretch. If you put another box (the data grid container) inside set to 10% height, it has no idea what 10% of the first box actually is. So, it just behaves normally.

To fix this, just give the container a specific height, and everything should work smoothly!

[lisaWriteJava]

Hello 1 question, how should does MUI handle for differences in screen resolution so that the grid can take the page height.

[michelengelen]

The data grid works best when it knows how much space it has to show your data. You can easily control this by setting a specific height for the container div.

Here are a few options:

• Set a fixed height in pixels (px): This is great if you know exactly how tall you want the data grid to be.
• Use a percentage (%): This allows the container to adjust its size based on the size of its parent element. But remember, the parent element needs a defined height itself for this to work!
• Go full screen: If you want the data grid to fill the entire viewport, you can use 100vh. This is a handy option for creating a seamless, full-height experience.

By giving the container div a clear height instruction, the data grid will know exactly how much space to use and display your information perfectly.

Example:

<div style={{ height: "100vh", width: "100%" }}>

The issue you're encountering isn't a bug with MUI's data grid, but rather how CSS interacts with your current setup. We've actually covered this in our documentation already:

[!IMPORTANT]
By default, the Data Grid has no intrinsic dimensions. Instead, it takes up the space given by its parent. The Data Grid will raise an error in the console if its container has no intrinsic dimensions.

Additional resource about height from MDN

[lisaWriteJava]

so when the % is used for height in the box where the grid , the loading doesn't show and varying % for height in the box where the grid don't seem to change the height at all. I've tried it in various environments and setup but it's the same behavior. If the box with the grid has a % the grid does render but the height never is enough to show loading initially and changing the % for height of the box where the grid is located in example seems to never get picket up by the grid. 10% seems to give the same thing as 50% in the example,

[lisaWriteJava]

https://stackblitz.com/edit/react-nqs1xg-9arl6o?file=Demo.js is the demo with the configuration so you can see the box is set with a %

[michelengelen]

https://stackblitz.com/edit/react-nqs1xg-9arl6o?file=Demo.js is the demo with the configuration so you can see the box is set with a %

I see what you mean! As you mentioned, the surrounding div has a 10% height, but that percentage needs a fixed reference point to work properly.

Here's the thing: without a specific height set for the parent element (in pixels, another percentage, or vh), the 10% for the div becomes ambiguous for the data grid container. This explains why things might not be acting as expected.

Now, about the loading indicator: are you referring to displaying a loading indicator while the data grid loads? If so, you can adjust the loading height when using the autoHeight prop by following these helpful instructions in our docs: link to docs section.

[lisaWriteJava]

Thanks for the feedback. so please help me to better understand, setting the height like so <div style={{ height: "10%", width: '100%' }}> isn't enough, I need to have a specific height for the <StyledEngineProvider injectFirst> that contains the code for the div given the code being rendered is 1 page that is here <div style={{ height: "10%", width: '100%' }}> <DataGrid {...data} columns={columns} localeText={{ filterOperatorNoContain: 'not contains', }} /> </div>

[lisaWriteJava]

good day, my coworker came up with something like this: https://stackblitz.com/edit/react-nqs1xg-9arl6o?file=Demo.js

it seems to do the trick. Do you see anythign objectionable or is this good with MUI practices

[DanailH]

Hi @lisaWriteJava, I've checked the types of issues you have been opening until now. I would like to bring it to your attention that the commercial support we offer relates to problems or limitations with our software such as bugs, regressions, or feature requests. Questions related to implementational details are not covered by the commercial support. I would kindly ask you to respect our support policy and only raise issues that are relevant to our components. Thank you!

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@lisaWriteJava: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.