[material-ui][Drawer] Temporary drawer changes content and header width when open in an iframe #43244
Comments
apedroferreira
added
component: drawer
apedroferreira
changed the title
|
Thanks for the report @apedroferreira 😊, this does seem like a bug. |
DiegoAndai
added
bug 🐛
DiegoAndai
changed the title
DiegoAndai
changed the title
|
Hi! My name is Albin, and I'm excited to start contributing to MUI! You will probably see more of me around here in the coming months, as I plan on contributing as much as I can. I have quite of bit of prior experience with JS/TS and React and would love to put it to use by helping improve something as useful to me as MUI. I will start by tackling this issue. 😊 |
|
The issue was caused by the usage of the main window instead of the iframe's window when calculating the width of the scroll bar, which made the scroll bar seem a lot wider than it actually was. This made the content on the page compress to be small enough to fully fit behind the drawer, thus hiding it entirely. For now, I only fixed this issue when used in combination with what caused the problems this issue addresses, but since the getScrollbarSize is used by many other components as well, it is probably a good idea to look into if it causes any other strange bugs anywhere. However, I don't know if that fits into this issue, or if I should create another issue addressing that. |
|
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. |
Steps to reproduce
In the "Responsive drawer" example in https://mui.com/material-ui/react-drawer/#responsive-drawer, if you expand the mobile menu, the contents of the header and page content disappear, which I'm not sure is expected.
Here's a preview in Toolpad where part of the behavior can also be observed: https://deploy-preview-3893--mui-toolpad-docs.netlify.app/toolpad/core
In the iframe with the example dashboard layout, if you expand the mobile menu (which uses a
Drawercomponent withvariant="temporary"), you can see that the page content disappears because its width becomes 0 when the mobile menu opens.Even in the
AppBarandToolbarcomponents we use for the header, we needed to addleft: 0to theAppBarandwidth: 100vwto theToolbarso that the content of the header would not disappear when the mobile menu is opened in this example. When the mobile menu is not open, everything works normally.DashboardLayout component: https://github.com/mui/mui-toolpad/blob/master/packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx
Current behavior
See "Steps to reproduce".
Expected behavior
The page content and header content would remain in the same place when a temporary Drawer is open inside an iframe.
Context
We were trying to make our implementation of a dashboard layout in Toolpad work as it now does in https://deploy-preview-3905--mui-toolpad-docs.netlify.app/toolpad when the mobile menu is expanded (content does not shift or disappear).
We've fixed it by forcing
width: 100vwin the page content in mui/toolpad#3905, as we already do in the header too, but these could be considered just superficial fixes to a deeper problem with the drawer?Might not be completely unintentional or the biggest priority, but just bringing up this issue!
Let me know if you need any more info or clarity.
Your environment
System:
OS: macOS 14.5
Binaries:
Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm
pnpm: 9.4.0 - /usr/local/bin/pnpm
Browsers:
Chrome: 127.0.6533.100
Edge: Not Found
Safari: 17.5
npmPackages:
@mui/internal-docs-utils: 1.0.9 => 1.0.9
@mui/internal-markdown: 1.0.9 => 1.0.9
@mui/internal-scripts: 1.0.15 => 1.0.15
@mui/monorepo: github:mui/material-ui#b9a041d089cb50067b853b18fe2b140b2e2f0810 => 6.0.0-beta.5
@mui/x-charts: 7.12.0 => 7.12.0
typescript: 5.5.4 => 5.5.4
Search keywords: drawer temporary width
The text was updated successfully, but these errors were encountered: