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/
3.92k stars 1.19k forks source link

[DataGrid] VirtualScroller broke the whole DataGrid when the width changes #9811

Closed guigonzalezz closed 11 months ago

guigonzalezz commented 11 months ago

Duplicates

Latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/kind-water-glqnkg?file=/demo.tsx

Steps:

  1. Add the width on .MuiDataGrid-virtualScroller inside the sx propertie on DataGrid
  2. You will gonna see the problem on the table after that

Current behavior 😯

When changing the width of the bar, is breaking the style of the whole component, the CSS in the bar is getting correct, but breaks the inside where the data is shown

Expected behavior 🤔

The expected behavior is to be able to change the style of the scroll bar without breaking the style of the page.

Context 🔦

I would like to be able to customize the scrollbar that appears inside the datagrid where the rows are displayed.

Your environment 🌎

npx @mui/envinfo ``` System: OS: Windows 10 10.0.25393 Binaries: Node: 16.18.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD Browsers: Vivaldi: 6.1 npmPackages: @emotion/react: ^11.11.0 => 11.11.0 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.3 @mui/core-downloads-tracker: 5.13.7 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/lab: ^5.0.0-alpha.136 => 5.0.0-alpha.136 @mui/material: ^5.13.3 => 5.13.3 @mui/private-theming: 5.13.7 @mui/styled-engine: 5.13.2 @mui/styled-engine-sc: ^5.12.0 => 5.12.0 @mui/system: 5.14.0 @mui/types: 7.2.4 @mui/utils: 5.13.7 @mui/x-data-grid: ^6.10.0 => 6.10.0 @mui/x-data-grid-generator: ^6.10.0 => 6.10.0 @mui/x-data-grid-premium: 6.10.0 @mui/x-data-grid-pro: 6.10.0 @mui/x-date-pickers: ^6.9.2 => 6.9.2 @mui/x-date-pickers-pro: ^6.9.2 => 6.9.2 @mui/x-license-pro: 6.9.0 @types/react: 18.2.8 => 18.2.8 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: ^5.3.11 => 5.3.11 typescript: 5.1.3 => 5.1.3 ```

Order ID or Support key 💳 (optional)

No response

cherniavskii commented 11 months ago

Hi @guigonzalezz Why would you want to change the width of the virtual scroller?

Note that the virtual scroller is that scrollable container that contains the grid rows:

guigonzalezz commented 11 months ago

Basically my main goal is to change the style of the scroll bar, I tried to update the Webkit outside of MuiDataGrid-virtualScroller but I had no results on the screen, that’s why I thought it might be a bug or something, but it was just a badunderstood from my part, I’m sorry, and thanks for the lighting, I just realized that when I saw your screenshot.