[data grid] Manage Columns Panel Increases Page Height When DataGrid is at the Bottom

[N3cr0s1s]

The problem in depth

When the DataGrid is positioned at the bottom of the page, opening the "Manage Columns" panel causes the entire page height to increase unexpectedly. This behavior can disrupt the user experience, especially when navigating within the grid.

I discovered that if I toggle the CSS transform property of the panel, it resolves the issue by causing the DataGrid to jump to the top of the table, which is the desired behavior. However, until I modify the transform property, the panel simply increases the page size, leading to a less than optimal experience.

Before the transform turn off/on

After

Your environment

`npx @mui/envinfo`

``` System: OS: Linux 6.5 Ubuntu 23.10 23.10 (Mantic Minotaur) // myNote: It happens on Windows 11 as well Binaries: Node: 20.17.0 - /usr/bin/node npm: 10.8.2 - /usr/bin/npm pnpm: Not Found Browsers: Chrome: Not Found Edge: 129.0.2792.52 (Official build) (64-bit) npmPackages: @emotion/react: ^11.10.4 => 11.10.4 @emotion/styled: ^11.10.4 => 11.10.4 @mui/base: 5.0.0-alpha.75 @mui/core-downloads-tracker: 5.10.6 @mui/icons-material: ^5.10.6 => 5.10.6 @mui/lab: ^5.0.0-alpha.76 => 5.0.0-alpha.76 @mui/material: ^5.10.6 => 5.10.6 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.15 @mui/utils: 5.16.6 @mui/x-data-grid: 7.16.0 @mui/x-data-grid-pro: ^7.16.0 => 7.16.0 @mui/x-date-pickers: 5.0.0-alpha.0 @mui/x-internals: 7.16.0 @mui/x-license: 7.16.0 @mui/x-license-pro: ^6.10.2 => 6.10.2 @types/react: ^18.0.28 => 18.0.28 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: ^5.0.1 => 5.3.3 typescript: ^4.9.5 => 4.9.5 ```

Search keywords: manage columns overflow, DataGrid panel behavior, Manage Columns panel Order ID: 98530

[michelengelen]

Hey @N3cr0s1s ... you can do this to prevent the behavior you are seeing:

slotProps={{
  panel: { placement: 'auto' },
}}

But this will apply to all panels in the data grid. Would that be a problem for you?

[N3cr0s1s]

Thank you very much, this solved the issue! It's not a problem that it applies to all panels, it works perfectly for my use case.

[github-actions[bot]]

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.

[!NOTE] We value your feedback @N3cr0s1s! How was your experience with our support team? We'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!