Repository navigation
Customisation toolbar overlap #4111
Description
Activity
Link to live example: (required) its not live
You can use stackblitz/codesandbox
- We could improve the layout to keep the title centered between the left menu button and the right actions
- You can always use media queries to hide content on smaller screens.
- Default behavior could be what you propose:
fall down below each other
Reacted by Pedro FerreiraFor now my suggestion would be to show something smaller or nothing at all in smaller breakpoints as shown in the demo/example at https://mui.com/toolpad/core/react-dashboard-layout/#system-DashboardLayoutSlots.tsx
Will try to come up with a more "automatic solution" for this though if possible!
Another idea that might help fix this on our side: keeping the title left-aligned instead of centering it in mobile viewports.
Screen.Recording.2024-09-19.at.1.20.23.pm.mov
i'm using a external style sheet to achieve my desired goals for the moment until there's a default option for stacking elements in the menu (see video)
@media (max-width: 600px) { div.MuiBox-root.css-1btlyma { position: relative; left: unset; -webkit-transform: unset; -moz-transform: unset; -ms-transform: unset; transform: unset; } div.css-k008qs { display: unset; } div.css-ju88wr-MuiToolbar-root { flex-wrap: wrap; } header.css-162wlvu-MuiPaper-root-MuiAppBar-root { display: contents; } div.css-jp8v2o-MuiToolbar-root { display: none; } }- moved this from In progress to Completed in Toolpad public roadmap
on Nov 8, 2024 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.Note
@ethan1141 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.
Metadata
Metadata
Assignees
Projects
- Status
Steps to reproduce
Link to live example: (required) its not live
Steps:
slots={{
toolbarActions: Search,
}}
>
3.shrink or go to mobile view - it overlaps content
Current behavior
Expected behavior
fall down below each other
Context
to add content to the right corner
Your environment
npx @mui/envinfoSystem:
OS: macOS 13.4.1
Binaries:
Node: 21.4.0 - /opt/homebrew/bin/node
npm: 10.8.2 - /opt/homebrew/bin/npm
pnpm: Not Found
Browsers:
Chrome: 127.0.6533.120
Edge: Not Found
Safari: 16.5.2
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/base: ^5.0.0-beta.40 => 5.0.0-beta.40
@mui/core-downloads-tracker: 5.16.7
@mui/icons-material: ^6.1.0 => 6.1.0
@mui/joy: ^5.0.0-beta.48 => 5.0.0-beta.48
@mui/lab: 6.0.0-beta.9
@mui/material: ^6.1.0 => 6.1.0
@mui/private-theming: 6.1.0
@mui/styled-engine: 6.1.0
@mui/system: 6.1.0
@mui/types: 7.2.15
@mui/utils: 5.16.6
@mui/x-data-grid: ^7.16.0 => 7.16.0
@mui/x-date-pickers: ^7.15.0 => 7.15.0
@mui/x-internals: 7.16.0
@toolpad/core: ^0.6.0 => 0.6.0
@toolpad/utils: 0.6.0
@types/react: 18.3.1 => 18.3.1
react: 18.3.1 => 18.3.1
react-dom: 18.3.1 => 18.3.1
typescript: 5.4.5 => 5.4.5
Search keywords: Customisation, overlap