Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Modal] Support scrollbar-gutter #79

Closed
1 task
oliviertassinari opened this issue Jan 23, 2024 · 5 comments
Closed
1 task

[Modal] Support scrollbar-gutter #79

oliviertassinari opened this issue Jan 23, 2024 · 5 comments
Labels
component: modal This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature

Comments

@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 23, 2024

Steps to reproduce

Steps:

  1. Add this CSS to the page:
html {
  scrollbar-gutter: stable;
}

and render a <Modal> component, e.g.

Screen.Recording.2024-01-23.at.01.32.26.mov

Current behavior

The layout moves and the backdrop doesn't cover the whole page.

Expected behavior

Either scrollbar-gutter: auto is set as a temporary reset while the dialog is open (better) or no padding is added to the body.

Context

TODO

Your environment

npx @mui/envinfo
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: scrollbar gutter

@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 23, 2024
@DiegoAndai DiegoAndai changed the title [modal] Support scrollbarGutter [material-ui][Modal] Support scrollbarGutter Jan 23, 2024
@DiegoAndai DiegoAndai removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 23, 2024
@oliviertassinari

This comment was marked as resolved.

@oliviertassinari oliviertassinari changed the title [material-ui][Modal] Support scrollbarGutter [Modal] Support scrollbarGutter Jan 23, 2024
@oliviertassinari oliviertassinari changed the title [Modal] Support scrollbarGutter [modal] Support scrollbarGutter Jan 23, 2024
@oliviertassinari
Copy link
Member Author

oliviertassinari commented Jan 23, 2024

A side note, a similar outcome can be achieved with the overflow-y style:

html {
  overflow-y: scroll;
}

but it's not ideal, see the difference in UX (Windows):

Screen.Recording.2024-01-24.at.00.34.21.mov

@oliviertassinari oliviertassinari changed the title [modal] Support scrollbarGutter [modal] Support scrollbar-gutter Jan 23, 2024
@oliviertassinari
Copy link
Member Author

@michaldudak michaldudak transferred this issue from mui/material-ui Feb 27, 2024
@michaldudak michaldudak changed the title [modal] Support scrollbar-gutter [Modal] Support scrollbar-gutter Feb 27, 2024
@michaldudak michaldudak added component: modal This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature labels Feb 27, 2024
@vladmoroz
Copy link
Contributor

Done in #604

Copy link

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: modal This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature
Projects
None yet
Development

No branches or pull requests

4 participants