I am trying out Drawer component of Google's material UI library. I have it configured and working but the problem is, it's overlapping on the underlying navigation bar on my web app. Is there a way I can have the drawer functionality of this library restricted to {entireScreen - topNavigationBar} area?
Here is what my render function returns
<div>
<NavBar />
<div>
<Button onClick={this.handleLeftOpen}>Menu</Button>
<Drawer
open={this.state.open.left}
onRequestClose={this.handleLeftClose}
onClick={this.handleLeftClose}>
{leftDrawerList}
</Drawer>
</div>
</div>
If you look at Drawer styles, you'll see that it has z-index: 1300 property. So I suppose you should give your Navbar z-index that is greater than 1300
Related
I'm working on an application using MaterialUI that embeds in other pages using an iFrame. Whenever we show a component that renders into a Popover (both MUI select and menu components do this), the iFrame scrolls / jumps position as the popover opens.
Here is an example where this happens.
https://erehd6.csb.app
Happens in Chrome and Firefox, but not Safari.
To reproduce, you will need to scroll the iFrame off the top of the page. Then the popover demo buttons will exhibit this behavior, or the overflow menus to access code sources off the site (github/stackblitz/copy JS source/copy TS source):
<!doctype html>
<html lang="en">
<body style="margin: 0;">
<div style="height: 1000px;"></div>
<iframe src="https://v4.mui.com/api/popover/" style="border: 0; width: 100vw; height: 100vh;"></iframe>
<div style="height: 1000px;"></div>
</body>
</html>
How do I prevent this scrolling/jump from happening? The Popper component does not have this same issue, but I can't figure out how to replace the Popover with the Popper in a way that doesn't require a library fork (and a huge amount of re-testing our application). This happens in all versions of MUI btw, but I couldn't put the current site into an iFrame.
I tried replacing the transition component of Grow with Fade but that did not help. I'm still trying to pinpoint the exact issue, it's somewhere in the positioning code for the Popover.
Adding the disableAutoFocus={true} property to any Popover or any other component relying on Popover should prevent any scrolling weirdness. You might need to use disableEnforceFocus as well, depending on what behavior you desire. These are props from the Modal component (of which Popover is a "child" of): https://mui.com/material-ui/api/modal/
I just ran into a similar problem when using a <Menu /> in an iframe, which when opened, caused the browser to scroll the page and focus on the iframe. In the case of this <Menu />, I also had to add a autoFocusItem: false property to the MenuListProps, so these are the relevant props for me:
<Menu
MenuListProps={{
autoFocusItem: false,
}}
disableAutoFocus
/* other props */
>
{/* MenuList components */}
</Menu>
Adding to what #amitt said. In order to allow for both accessibility and to fix the menu jumping you can in addition to disableAutoFocus and autoFocusItem: false, you can manage your own focus state.
By using a ref, you can control the focus on enter.
const onFocus = () => {
ref?.current?.children[2].children[0].firstChild.focus();
};
<Menu
MenuListProps={{
autoFocusItem: false,
}}
disableAutoFocus
ref={ref}
TransitionProps={{
onEntered: onFocus,
}}
/* other props */
>
{/* MenuList components */}
</Menu>
I've seen a few questions similar to this on SO but none that quite matched my needs. I'm using React and Material-UI to make a dashboard. I'm using Material-UI's mini variant drawer as a sidebar, with links that should display routes when clicked. The sidebar can be opened by clicking a button, which updates a state variable and adjusts the CSS className of the sidebar. This causes the sidebar/drawer to "slide" open.
If I click a link on the sidebar, I can easily display a desired route. However, I can't get the route to also "slide" to the side when the sidebar/drawer opens. It will probably be easier to understand by looking at the code, so I've included a link to a codesandbox below:
https://codesandbox.io/s/appbar-with-react-router-bkogj?file=/src/App.js
I basically copy and pasted everything from the Material-UI website (using v4 I believe), then added the route myself. Would appreciate any feedback on how to solve this issue.
For this I think the MiniDrawer component needs to render the content since it necessarily is aware of the space the appbar and drawer components occupy.
MiniDrawer
Take and render a children prop.
export default function MiniDrawer({ children }) {
...
return (
<div className={classes.root}>
<CssBaseline />
<AppBar
...
>
...
</AppBar>
<Drawer
...
>
...
</Drawer>
<main className={classes.content}>{children}</main>
</div>
);
}
App
Render the Outlet as a child component.
export default function App() {
return (
<div className="App">
<AppBar>
<Outlet />
</AppBar>
</div>
);
}
RejectTable
Remove the excess margin so it fills the content area the parent component allows.
const useStyles = makeStyles((theme) => ({
content: {
flexGrow: 1,
padding: theme.spacing(3),
height: "100%",
// marginLeft: "4em" // <-- remove
}
}));
I'm learning the basics of React Router. So what I'm making right now has a navigation bar on top and two buttons below this top bar. What I want is for the a table or something of the sort to show up when I press one of the buttons.
The problem is that when I click the button, the URL changes but the all the components vanish. Even the component I want displayed doesn't show and the other components (which ideally should stay) also disappear.
What am I doing wrong here? The code is as follows :-
const Site = () =>
<React.Fragment>
<div className="container-fluid row">
<div className="offset-3 col-sm-4">
<Link to="/A">
<Button value="A"/>
</Link>
</div>
<div className="col-sm-4">
<Link to="/B">
<Button value="B"/>
</Link>
</div>
</div>
<div>
<Route path="/B" component={B}/>
</div>
</React.Fragment>
export default Site;
The Site page has the URL '/Site'.
Edit:
Just thought I'd mention the structure a bit. So for now I have a page with a button. Clicking this button should load the a component (called Base with URL '/Site') which is calling the TopBar and Site components.
Then I have these two buttons - A and B which have their respective URLs.
I got a problem with Swipeable drawer from Material UI. In normal Drawer isnt nessesary to add function onOpen. SO my question is what should I add thare?
container={container}
variant="temporary"
open={mobileOpen}
anchor="left"
onClose={handleDrawerToggle}
onOpen={}
The "onOpen" is used for "opening" the drawer (its the behavior it will have when it opens) If you want a persistent drawer (always open) there are other options there!
adding: Within the onOpen you should handle the change of value so react knows it is open and material ui make the transition.
https://material-ui.com/components/drawers/#permanent-drawer
Good luck!
I'm currently having troubles with the material-ui drawer (https://material-ui-next.com/ one)
When I open the mini variant, the collapse inside my menu resets (closes because of the "remount").
However I would like them to persist their current state (open/closed).
Does Anyone know a way to achieve this?
The drawer:
<Drawer type="permanent"
classes={{paper: classNames(classes.drawerPaper, !this.state.open && classes.drawerPaperClose)}}
open={this.state.open}>
<div className={classNames(classes.drawerInner)}>
<Navigation updateTitle={this.updateTitle}/>
</div>
</Drawer>
The navigation component: https://pastebin.com/webdmLXp
Rendered with open collapse:
After clicking the burger button:
Sure Mr who I share my lastname with, you need to keep state of each <MenuItem>. Just add an onClick to each menuItem and toggle the state in your component. This does not really relate to Material-ui, but is more a general React question.