I created a responsive navigation bar using the React material UI Appbar component.
If the screen size is large, it shows tabs in the navigation bar. If the screen size is medium or smaller, it uses material UI responsive drawer to show the navigation bar (home, about, etc) on the left side right below the navigation bar. How can I move the responsive material UI drawer to the right?
https://material-ui.com/components/drawers/#responsive-drawer
You can use the available anchor prop (read more here).
anchor='right'
<Drawer
container={container}
variant="temporary"
anchor='right'
open={mobileOpen}
onClose={handleDrawerToggle}
classes={{
paper: classes.drawerPaper,
}}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
>
{drawer}
</Drawer>
You can view the codesandbox here
Related
I want to show another Box component above Modal component. Both are material ui component.
There is Parent Box component and there is another Box component inside Parent Box component.
Thing I want to do is show the second/child Box component on the top.
Right now it seems like the second/child Box component is under the image.
You can click a open modal button and inspect modal.
You will see there will be <img />, <div></div> and <svg />
<div></div> should be Box component but I can't see it over the top.
return (
<div>
<Button onClick={handleOpen}>Open modal</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box // parent Box component
sx={{
...style,
width: width,
height: height
}}
className={classes.imageExpand}
>
<img
src="https://cdn.pixabay.com/photo/2022/06/13/15/36/grain-7260250__340.jpg"
alt="sample"
className={classes.imageExpand}
/>
<Box className={classes.conainer} /> // child Box component
<CloseIcon className={classes.closeIcon} />
</Box>
</Modal>
</div>
);
Attempts
1, set z-index:1000 and position:'relative'
2, set lower z-index to the parent component
3, z-index:'1000 !important'
4, set transform and opacity
None of them worked. Is there any other way to show <Box /> top?
I even tried to switch Box component to regular div tag and this also doesn't work.
Several MUI components utilize z-index, employing a default z-index scale in MUI that has been designed to properly layer drawers, modals, snackbars, tooltips, and more.
The z-index values start at an arbitrary number, high and specific enough to ideally avoid conflicts:
mobile stepper: 1000
fab: 1050
speed dial: 1050
app bar: 1100
drawer: 1200
modal: 1300
snackbar: 1400
tooltip: 1500
so you should use a z-index greater than 1300.
you can get more info at https://mui.com/material-ui/customization/z-index/
I followed this tutorial (Full code on github) and implemented the material drawer. Now I can't close the drawer or open it with something like a function. How can I do it?
also the drawer is not swapping.
How I can access to Drawer object inside my webpage (DOM)? And change it's state such open = false.
Sorry for my questions I'm very new to react.
<Drawer
variant="temporary"
anchor="right"
open={true}
>
<List>
<ListItem>
first text
</ListItem>
<ListItem>
b
</ListItem>
</List>
</Drawer>
I want to have a menu icon on top right of my page and when the user clicks on it a modal navigation drawer will display.
there are many examples here in material-ui docs of how to use Drawers. check this out
This piece of code not showing any close icon in the ant design Drawer.
<Drawer
title="Job ID: 9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d"
placement="right"
closable={false}
onClose={onJobDetailsDrawerClose}
visible={jobDetailsDrawervisible}
width="75%"
closeIcon={<CloseOutlined />}
>
But the drawer API showed this:
Any idea why the Drawer not showing up any close icon?
Appears the close icon is hidden when you specify
closable={false}
Drawer API - closable
Whether a close (x) button is visible on top right of the Drawer
dialog or not.
With this prop set to false the drawer is toggleable externally.
I have to fix buttons on the bottom of my Material-UI dialog. I mean buttons should be in the bottom of dialog all the time regardless dialog size, list size, etc.
so far I have tried position: "fixed", bottom: 0, they are not helpful.
Any suggestions?
I am using MaterialUI Grid (its not a table in the screen).
Mixing Material UI Dialog Components with HTML elements can short circuit proper flow of Material UI component.
What I had... footer buttons failed to fix to the bottom... notice the body message is in a HTML div and the footer is in a material UI DialogActions
<Dialog>
<div>body message</div>
<DialogActions>
<Button>Cancel</Button> <Button>Save</Button>
</DialogActions>
</Dialog>
I fixed it by inserting the body-message div into the Material UI DialogContent component... this made the DialogActions do what it was supposed to do (stay fixed at the bottom).
<Dialog>
<DialogContent>
<div>body message</div>
</DialogContent>
<DialogActions>
<Button>Cancel</Button> <Button>Save</Button>
</DialogActions>
</Dialog>
From the screenshot, it looks like you're displaying a Table in a Dialog.
From this conclusion it is suggested -
To embed your 'Table' component inside 'DialogContent'
The button should be right aligned on the Dialog, meaning your buttons
should be placed inside 'DialogActions'
I created a sandbox with some mock data (due to insufficient details in the question) - Have a look - https://codesandbox.io/embed/material-dialog-actions-qcrnx
OK, It was fixed by using MaterialGrid and adding some styles (display: "flex", height: "80px", justifyContent: "space-between")
I have an issue related with styling in React / Material UI. I think is an issue related with TouchRipple from Material-UI
<div key={indexP}>
<Link className={classes.link} to={parent.link}>
<ListItem button selected={this.state.treeParentOpen[indexP] === true} onClick={this.handleClick(indexP)}>
<ListItemIcon>
<ParentIcon />
</ListItemIcon>
<ListItemText primary={parent.title} />
</ListItem>
</Link>
<Divider />
</div>
I have the above code inside a Drawer component (this is a small extract just to exemplify), for a Sidebar menu.
The issue i am having is related with the styling interaction of the ListItem and Link Components.
If i take the Link out of the code i have a normal ListItemripple behaviour (onclick and offclick), everything is pretty and in grey shades.
When i had the Link to the code (as is), the ripple behaviour of the ListItem changes and onClick is Blue and offClick purple. How should i address the styling of the ripple effect associated with buttonBase used in ListItem.
Thanks!