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.53k stars 1.32k forks source link

[data grid] Columns disappear when switch browser to full screen #5192

Open deepen77 opened 2 years ago

deepen77 commented 2 years ago

Duplicates

Latest version

Current behavior 😯

When browser is opened as example in the half screen and try to switch to full screen then part of columns on the right hand side are disappeared. When you start to resize or refres the web browser , everything back to normal.

https://4w7qra--run.stackblitz.io/

Expected behavior 🤔

After switch to full screen, the columns shoull be visible directly

Steps to reproduce 🕹

Steps:

  1. image

  2. image

Context 🔦

This issue affected data loaded before switching to full screen. After switch to full screen, the users usually trying refresh the page to see all columns and if data is paginated, all those features are back to initial states.

Your environment 🌎

System: OS: Windows 10 10.0.19044 Binaries: Node: 16.15.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.39) npmPackages: @emotion/react: ^11.9.0 => 11.9.0 @emotion/styled: ^11.8.1 => 11.8.1 @mui/base: 5.0.0-alpha.83 @mui/icons-material: ^5.8.2 => 5.8.2 @mui/material: ^5.8.2 => 5.8.2 @mui/private-theming: 5.8.0 @mui/styled-engine: 5.8.0 @mui/system: 5.8.2 @mui/types: 7.1.3 @mui/utils: 5.8.0 @mui/x-data-grid: ^5.12.0 => 5.12.0 @types/react: 18.0.10 react: ^18.1.0 => 18.1.0 react-dom: ^18.1.0 => 18.1.0 typescript: 4.7.2

Order ID 💳 (optional)

No response

alexfauquette commented 2 years ago

The stackblitz linkes take time to open, but this bug is simple to reproduce. You can use a codesandbox link of the documentation demo:

https://569mbm.csb.app/

Probably the autosizer that does not catch this specific resizing of the window

If it is problematic you can disable the virtualization, or increase the columnBuffer

deepen77 commented 2 years ago

thanks, columnBuffer fixed this issue :)

alexfauquette commented 2 years ago

I just re-open the issue open to keep track of this bug

m4theushw commented 2 years ago

Duplicate of #5085?

alexfauquette commented 2 years ago

Not sure, the first one is about React Tab, this one is about moving the Chrom windows

TheRealCuran commented 2 years ago

Not sure which of the two bugs – this or #5085 – fit better, but I am seeing missing columns with a flex layout and maximising/restoring a window. The important part is: the different between maximised and "restored" window size must be "big enough". If you just resize slowly by dragging a corner or the difference between maximised and restored is small enough, all columns stay visible.

Putting a box around the DataGridPro which listens to resize on window and adjusts the height, works around the issue.