search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

Datagrid flex columns jitter on container height change if using autoPageSize #11207

Open Cryostasis opened 10 months ago

Cryostasis commented 10 months ago

Steps to reproduce

Link to live example: stackblitz

https://github.com/mui/mui-x/assets/7410499/fe16ecd8-a486-44c0-836b-d54fce4428a4

Current behavior

If DataGrid has columns with flex prop and autoPageSize is enabled, columns jitter horizontally if page size decreases (when parent container shrinks vertically)

This happens in Chrome and in Edge. In Firefox everything works well without any jitter

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo System: OS: Windows 11 10.0.22621 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Chromium (119.0.2151.72) npmPackages: @emotion/react: 11.11.1 @emotion/styled: 11.11.0 @mui/base: 5.0.0-beta.17 @mui/core-downloads-tracker: 5.14.11 @mui/icons-material: ^5.14.1 => 5.14.9 @mui/material: ^5.14.11 => 5.14.11 @mui/private-theming: 5.14.11 @mui/styled-engine: 5.14.11 @mui/system: 5.14.11 @mui/types: 7.2.8 @mui/utils: 5.14.17 @mui/x-charts: ^6.18.0 => 6.18.0 @mui/x-data-grid: 6.16.0 @mui/x-data-grid-pro: ^6.16.0 => 6.16.0 @mui/x-date-pickers: 6.16.0 @mui/x-date-pickers-pro: ^6.16.0 => 6.16.0 @mui/x-license-pro: 6.10.2 @types/react: ^18.2.29 => 18.2.29 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.3.2 => 5.3.2

Search keywords: datagrid jitter autoPageSize

michelengelen commented 10 months ago

@romgrk correct me if i am wrong, but isn't this kind of expected, since we need to layout to measure the rows before we can update the rendering? Not sure why FF has no problems with this, though! 🤷🏼

romgrk commented 10 months ago

But the columns are jittering, not the rows, so I think we can consider it as a bug. No idea why FF behaves differently here.

Cryostasis commented 10 months ago

Tested this on a different PC, on Firefox version 95, and this bug appeared. And disappeared after I updated Firefox to the latest version

romgrk commented 10 months ago

Ah ok. In that case maybe we can consider that it's an upstream bug? I don't think debugging an old firefox version is worth it.

Cryostasis commented 10 months ago

Problem still exists in latest Crome and other chromium-based browsers

Cryostasis commented 6 months ago

Manage to fix this in my case by adding following to styleOverrides in the theme: '& .MuiDataGrid-scrollbar--vertical': { display: 'none', overflow: 'hidden' },