[data grid] scroll not working inside modal

[igortas]

Steps to reproduce

Link to live example: (required)

Steps:

1. Create simple modal
2. Add data grid with adding minHeight and minWidth options and populate the grid with some sample data and wrap inside as box as children
3. Try to scroll

Current behavior

Scroll not working at all when table is part of a modal, tried on different browsers

Expected behavior

Scroll should work when table is inside modal.

Context

No response

Your environment

System: OS: Linux 5.15 Ubuntu 24.04 LTS 24.04 LTS (Noble Numbat) Binaries: Node: 22.6.0 - ~/.nvm/versions/node/v22.6.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v22.6.0/bin/npm pnpm: Not Found Browsers: Chrome: Not Found npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.58 @mui/core-downloads-tracker: 6.0.1 @mui/icons-material: ^6.0.1 => 6.0.1 @mui/lab: ^6.0.0-beta.8 => 6.0.0-beta.8 @mui/material: ^6.0.1 => 6.0.1 @mui/private-theming: 6.0.1 @mui/styled-engine: 6.0.1 @mui/system: 6.0.1 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-data-grid: 7.15.0 @mui/x-data-grid-premium: ~7.15.0 => 7.15.0 @mui/x-data-grid-pro: 7.15.0 @mui/x-internals: 7.15.0 @mui/x-license: 7.15.0 @mui/x-license-pro: ^6.10.2 => 6.10.2 @mui/x-tree-view: ~7.15.0 => 7.15.0 @types/react: ^18.3.5 => 18.3.5 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 styled-components: 5.3.11 typescript: ^5.5.4 => 5.5.4

Search keywords: grid scroll modal

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[igortas]

Hi @michelengelen I've created simple demo. Take a look, still in the example scrolling not working. https://codesandbox.io/p/sandbox/nifty-currying-8hcgrm?file=%2Fsrc%2FDemo.tsx%3A120%2C54

[michelengelen]

I get it now... you are facing this since the container holding the grid does not have intrinsic dimensions. This necessity is clearly stated in the docs. If you give the modal the dimensions to calculate the render- and scrollerzones it will work as intended:

<Box
  bgcolor="background.paper"
  sx={{
    padding: '1rem',
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: '95%',
    height: '50vh',
  }}
>
  <DataGrid rows={rows} columns={columns} />
</Box>

[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.

@igortas: 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.