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.11k stars 1.27k forks source link

[data grid] Since upgrading to v7.x, aggregation row seems to float over the bottom of the grid #14462

Open gavbrennan opened 3 weeks ago

gavbrennan commented 3 weeks ago

The problem in depth

Since upgrading to v7, the total row for aggregation is no longer at the bottom of the grid but floats a few pixels above it FloatingExample

Your environment

`npx @mui/envinfo` System: OS: Windows 11 10.0.26100 Binaries: Node: 20.12.0 - C:\Program Files\nodejs\node.EXE npm: 7.10.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: 128.0.6613.113 Edge: Chromium (127.0.2651.105) npmPackages: @emotion/react: ^11.5.0 => 11.9.0 @emotion/styled: ^11.3.0 => 11.8.1 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: 5.16.7 => 5.16.7 @mui/lab: ^5.0.0-alpha.172 => 5.0.0-alpha.172 @mui/material: 5.16.7 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 => 5.16.6 @mui/styles: 5.16.7 => 5.16.7 @mui/system: 5.16.7 => 5.16.7 @mui/types: 7.2.15 @mui/utils: 5.16.6 @mui/x-data-grid: 7.13.0 @mui/x-data-grid-generator: 7.13.0 => 7.13.0 @mui/x-data-grid-premium: 7.13.0 => 7.13.0 @mui/x-data-grid-pro: 7.13.0 @mui/x-date-pickers: 7.13.0 => 7.13.0 @mui/x-date-pickers-pro: 7.13.0 => 7.13.0 @mui/x-internals: 7.13.0 @mui/x-license: 7.13.0 @mui/x-tree-view: 7.13.0 => 7.13.0 @types/react: ^18.2.0 => 18.2.7 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.3.5 => 4.6.4

Search keywords: Total row Order ID: 96815

michelengelen commented 3 weeks ago

Hey @gavbrennan ... do you have some custom styling in place? From the screenshot you shared we cannot really see anything.

The demos in the docs also do not show the described behavior, so my guess is that there have to be some styles applied that make it float.

A reproduction case would be ideal!

gavbrennan commented 3 weeks ago

I've narrowed it down to setting scrollbar-width in css - when its set to narrow, the horizontal scroll bar shrinks but the total row does not move with it. Unfortunately, I can't see to get scrollbar-width to do anything in codesandbox, I can change the scrollbar-color property fine but the width will not change.

michelengelen commented 3 weeks ago

@romgrk could you have a look? Thanks!

romgrk commented 3 weeks ago

Do you have a reproducible snippet I could copy/paste and debug, if codesandbox doesn't work? Please share it via CSB even if the problem isn't reproducible there: https://codesandbox.io/p/sandbox/thnslc

gavbrennan commented 3 weeks ago

Try this - the idea is make the object small enough that its forced to scroll, then set the scroll bar to be type 'thin'. Might not work on mac os (even in chrome) without all the equivalent webkit css: https://codesandbox.io/s/flamboyant-goldstine-fx2hwz

michelengelen commented 3 weeks ago

as already suspected by @gavbrennan it is working for me (on mac) ... 🤷🏼

gavbrennan commented 3 weeks ago

Is it actually working though, with the scroll bars shrinking to "thin" form and the grid correctly resizing, or do you mean the mac is just ignoring the change in size of the scroll bars?

michelengelen commented 3 weeks ago

ah, the scrollbars are not changing size because we render custom ones. And yes ... if I change the size to scrollbarSize prop 5 the aggregation row is indeed floating above the footer, but the scrollbars are not changing in size.

https://github.com/user-attachments/assets/3a0c4f7d-8678-42bc-bb8c-a43265cd7593

This seems like a regression ... it is working in v6: DEMO

gavbrennan commented 3 weeks ago

Agreed, as per the title of this report, this has only been an issue since moving to v7.x