[data grid] overflow issue when border is set to virtualScroller.

[boldurean]

Steps to reproduce

Link to live example: (required) Devbox example

Steps:

1. Open devbox example
2. Remove border class from DataGrid -> classes -> virtualScroller
3. Notice horizontal scroll to dissapear

Current behavior

There is a simple use case scenario where I want to separate toolbar from root (table body) as well as footer. When I set the border around the content container it looks like virtualScroller container become narrower by 2px (exact scroll amount) but virtualScrollContainer and it's children doesn't update it's width and causes overflow and ofc horizontal scroll. Adding border to practically anything from "main" class down creates overflow.

Expected behavior

Adding border to virtualScroller, virtualScrollerContainer should not cause overflow

Context

Style table body separate from root

Your environment

npx @mui/envinfo

Browsers:

- Chrome: Version 122.0.6261.57 (Official Build) (arm64)
- Safari: Version 17.3.1 (19617.2.4.11.12)
- Firefox: 123.0 (64-bit)

 System:
    OS: macOS 14.3.1
  Binaries:
    Node: 18.17.1 - ~/.nvm/versions/node/v18.17.1/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.1/bin/npm
    pnpm: 8.14.0 - ~/.nvm/versions/node/v18.17.1/bin/pnpm
  Browsers:
    Chrome: 122.0.6261.57
    Edge: 121.0.2277.128
    Safari: 17.3.1
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/icons-material: ^5.15.8 => 5.15.10
    @mui/lab: 5.0.0-alpha.161 => 5.0.0-alpha.161
    @mui/material: ^5.15.7 => 5.15.10
    @mui/x-data-grid: ^6.19.3 => 6.19.4
    @mui/x-date-pickers: ^6.19.3 => 6.19.4
    @mui/x-tree-view: ^6.17.0 => 6.17.0
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0

Search keywords: DataGrid overflow, virtualScroller overflow, horizontal scroll, border overflow.

[michelengelen]

@romgrk could you have a look at this please? Thanks! 🙇🏼

[romgrk]

Have you tried setting the border on the top/bottom elements instead of the virtual scroller? The scroller needs precise dimensions and the border affects them.

Also are you planning to migrate to v7? We're about to release it and the beta version is already available. It modifies the DOM structure substantially so if you plan to migrate, the solution for v6 would probably not work in v7.

[boldurean]

Have you tried setting the border on the top/bottom elements instead of the virtual scroller? The scroller needs precise dimensions and the border affects them.

That's what I did and it seems more a hack rather than solution bc when quick filter is applied and there is 1,2 elements displayed & virtual scroller becomes half empty without borders it doesn't look right:

Also are you planning to migrate to v7? We're about to release it and the beta version is already available. It modifies the DOM structure substantially so if you plan to migrate, the solution for v6 would probably not work in v7.

Wdm solution for v6 wouldn't be working with v7? I'm premium user and we will upgrade it to v7 if there is no major breaking changes.

[romgrk]

Wdm solution for v6 wouldn't be working with v7?

It means that the DOM layout has changed and the solution for v6 might not work for v7.

If you're planning to stay on v6, the best suggestion I can offer is to use absolutely positioned ::before and ::after pseudo-elements on the virtual scroller to simulate borders on the right & left. We can't easily support borders at that location in the DOM because it modifies the space available for the rows.

Alternatively, you can set the border on the full grid. In that case, you could try to hide the border in the header & footer by using pseudo-elements over those two elements, but you'd need to remove the toolbar and implement the toolbar components yourself outside the grid.

[boldurean]

Wdm solution for v6 wouldn't be working with v7?

It means that the DOM layout has changed and the solution for v6 might not work for v7.

Oh thats sucks.

If you're planning to stay on v6, the best suggestion I can offer is to use absolutely positioned ::before and ::after pseudo-elements on the virtual scroller to simulate borders on the right & left. We can't easily support borders at that location in the DOM because it modifies the space available for the rows.

Alternatively, you can set the border on the full grid. In that case, you could try to hide the border in the header & footer by using pseudo-elements over those two elements, but you'd need to remove the toolbar and implement the toolbar components yourself outside the grid.

Thanks for the suggestion. I guess the pseudo-elements are the easiest solution for this case.

[romgrk]

The DOM changes improved the UX and will allow us to be much more accessible for screen readers, so we advise to look into migrating to v7 if you can.

If that answers your question, you can close the issue. Feel free to reopen if you need more assistance.

[boldurean]

Thanks @romgrk, we will upgrade it once it's out of beta.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @boldurean?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[boldurean]

Hi @romgrk just to mention that adding border to the main in v7 works as expected :)