I want to position the Material UI Dialog based on the position of its parent.
In this case, I want to center it on the second grid item.
//parent element
<Grid container>
<Grid item xs={5} style={{ border: "1px solid black" }}>
Yerah{" "}
</Grid>
<Grid
item
xs={7}
style={{ border: "1px solid black", height: "100vh" }}
>
<div style={{ position: "relative" }}>
//on center of this div i want to position the Dialog
<SimpleDialog
selectedValue={selectedValue}
open={open}
onClose={handleClose}
/>
<br />
<Button
variant="outlined"
color="primary"
onClick={handleClickOpen}
>
Open simple dialog
</Button>
</div>
</Grid>
//Dialog component
const useStyles = makeStyles({
root: {
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)"
},
});
<Dialog
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
classes={{
paper: classes.root
}}
>
<DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
<div style={{ padding: 20 }}> Content will go here </div>
</Dialog>
Here is the sandbox for what I have tried so far but still the position is not being set based on the position of the parent div
https://codesandbox.io/s/material-demo-forked-sugfm?file=/demo.js
There is a prop in Modal API called container that accept an HTML element.
You could do something like this:
<Dialog
container={() => document.getElementById('parent-div')}>
</Dialog>
Related
I have a web app that uses a material ui drawer for smaller screens. The buttons on the top navigation pane work as expected( take the user to a section of the page ) but the ones in the drawer(created for responsiveness) don't. I am using react 18.2.0, typescript 4.9.4 and material ui 5.11.6
<AppBar>
<Toolbar sx={{
display: "flex",
justifyContent : "flex-end",
bgcolor : "whitesmoke",
color : "black"
}}>
<Stack component={"span"} spacing={.5} direction="row" sx={{
color: "inherit",
margin: "0px 15px 0px 0px",
position : "absolute",
left: 0
}}>
<Typography sx={{
fontFamily: "'Pacifico'",
fontSize : "1.2rem"
}}>{"< George Kimari />"}</Typography>
</Stack>
<Stack spacing={2} direction="row" component={"span"} sx={{
display : {
xs : "none",
sm: "flex"
},
justifySelf: "flex-end"
}}>
/*The button below works*/
<Button color={"inherit"} sx={ButtonTheme} href="#about">About me</Button>
</Stack>
<IconButton onClick={() => setDrawerOpen(true)}>
<Menu sx={{
color: "inherit",
display : {
xs : "flex",
sm : "none",
md : "none"
}
}}/>
</IconButton>
<Drawer open={drawerOpen} onClose={() => setDrawerOpen(false) } anchor="right">
/*The link and button below don't work
<Stack width={"200px"} sx={{
height: "70px",
display : "grid",
placeContent : "center"
}}><Link href={"#about"}component={"button"}>About</Link></Stack>
<Divider />
<Stack width={"200px"} sx={{
height: "70px",
display : "grid",
placeContent : "center"
}}><Button sx={{
width : "200px",
height : "50px"
}} color={"inherit"} href="#projects">Projects</Button></Stack>
</Drawer>
</Toolbar>
</AppBar>
)
}
I have tried replacing them with links to no avail.
I appreciate if anyone can give a solution to add space between or space evenly between the two IconButton inside the ImageListItem in Material UI. The code uses Material UI library inside Reactjs
<ImageListItem
key={item?.id}
cols={item.cols || 1}
rows={item.rows || 1}
>
<img
{...srcSetStyle(item.url, 121, item.rows, item.cols)}
alt={item.url}
loading="lazy"
/>
<ImageListItemBar
sx={{
background: "transparent",
top: "5%",
}}
position="top"
actionPosition="left"
actionIcon={
<>
<IconButton
sx={{ color: "red" }}
>
{item.isFavorite ? (
<FavoriteIcon className="favoriteIcon" />
) : (
<FavoriteBorderIcon
className="favoriteIcon"
/>
)}
</IconButton>
<IconButton
className="addIcon"
sx={{
color: "red",
}}
>
<AddCircleOutlineIcon />
</IconButton>
</>
}
/>
</ImageListItem>
You need to change flex-grow attributes of both MuiImageListItemBar-titleWrap and MuiImageListItemBar-actionIcon classes of ImageListItemBar like this:
sx={{
background: "transparent",
top: "5%",
"& .MuiImageListItemBar-titleWrap": {
flexGrow: 0
},
"& .MuiImageListItemBar-actionIcon": {
flexGrow: 1
}
}}
After that, you need to wrap your icons with a div and add desired style like this:
<div
style={{
display: "flex",
justifyContent: "space-between"
}}
>
... (action button icons here)
</div>
You can take a look at this sandbox for a live working example of this solution.
How do I put the clear icon on the card on the top right side of the card overlapping it.
What is the proper way to do it?
CLICK HERE = CODESANDBOX
<Paper
sx={{
padding: "1em",
background: "black"
}}
>
<IconButton color="error" aria-label="add to shopping cart">
<ClearIcon />
</IconButton>
<Grid
component="div"
container
spacing={2}
sx={{
marginBottom: "1em"
}}
>
<Grid component="div" item sm={12}>
<Alert>SUCCESS</Alert>
</Grid>
</Grid>
</Paper>;
Try this:
<Paper
sx={{
padding: "1em",
background: "black",
position: "relative"
}}
>
<IconButton
sx={{
position: "absolute",
top: "-15px",
right: "-15px",
// not necessary, just added this coz it looks weird
background: "white"
}}
color="error"
aria-label="add to shopping cart"
>
<ClearIcon />
</IconButton>
<Grid
component="div"
container
spacing={2}
sx={{
marginBottom: "1em"
}}
>
<Grid component="div" item sm={12}>
<Alert>SUCCESS</Alert>
</Grid>
</Grid>
</Paper>
What I did is simple, make the Paper position relative, then make the icon button absolute.
This way the button will follow whenever you move/animate the Paper.
The outcome would be something like this: https://wphyd.csb.app/
I need to remove the background shadow in the Material-UI dialog. But I can't find the way from API. Anyone can help me with that.
I need to remove this shadow...
<div id={"Location_Massage"} style={{ height: "10px !important" }}>
<Dialog
className={classes.location_verify_dialog}
fullScreen={fullScreen}
open={open}
style={{
marginTop: -470,
marginLeft: 460
}}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
>
<DialogContent>
<DialogContentText
style={{
borderRadius: 12,
height: "10px !important",
width: 170
}}
>
<div style={{ fontSize: 15, fontWeight: 700 }}>Me Labs</div>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
style={{ borderRadius: 15, left: -6, top: -15 }}
onClick={handleClose}
color="primary"
variant={"outlined"}
>
Cancel
</Button>
<Button
style={{ borderRadius: 15, left: -4, top: -15 }}
onClick={handleClose}
color="primary"
variant={"contained"}
>
Submit
</Button>
</DialogActions>
</Dialog>
</div>
I found the answer to my own question.
if you need to remove background from dialog just add these props.
hideBackdrop={true}
Dialog uses Paper component under-the-hood and provides a PaperProps prop to let you override the Paper properties including the elevation (which sets the Paper shadow).
EDIT: If you want to remove the Backdrop background color, you can use hideBackdrop, it's a Modal prop which the Dialog inherits from. But you should add some kind of border to be able to see the Dialog on the white background:
V5
<Dialog
open={open}
onClose={handleClose}
hideBackdrop
PaperProps={{
elevation: 0,
sx: {
border: "solid 1px gray"
}
}}
>
V4
const useStyles = makeStyles({
paper: {
border: "solid 1px gray"
}
);
<Dialog
open={open}
onClose={handleClose}
hideBackdrop
PaperProps={{
elevation: 0,
className: classes.paper
}}
>
Live Demo
There are a couple of options, using which you can hide the background shadow of the Dialog component.
Option 1
You can use the location_verify_dialog class and select the paper class in the makeStyles or useStyles.
location_verify_dialog: {
"& .MuiDialog-paper": {
boxShadow: "none"
}
},
Option 2
You can assign a new class to the paper key in the classes object for the Dialog component and remove the background shadow.
paper: {
boxShadow: "none"
}
Dialog component
<Dialog
className={classes.location_verify_dialog}
fullScreen={false}
open={open}
style={{
marginTop: -470,
marginLeft: 460,
boxShadow: "none"
}}
onClose={handleClose}
aria-labelledby="responsive-dialog-title"
classes={{ paper: classes.paper }} // this is the class prop
>
Here is the sandbox link with both of the options.
I have a Material UI dialog that will display a bunch of images, the images have landscapes or portraits aspect ratio. And they might have different resolutions as well. I want to find an elegant solution to maintain the dialog's height 80% of the screen.
But fit the whole image inside the dialog, without needing to scroll, here's a SandboxExample.
Or find the snippet bellow:
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
hasCloseButton
style={{ maxWidth: "100%", maxHeight: "100%" }}
>
<img
style={{ maxWidth: "100%", height: 'auto' }}
src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
alt="image"
/>
</Dialog>
</div>
to achieve that you may use viewheight unit (vh). Combine maxHeight(based on vh) along maxWidth: 100%. Dialog uses 32px as margin, hence you could use maxHeight: "calc(100vh - 64px)" or you can use a custom vh like maxHeight: "80vh"
<img
style={{ maxWidth: "100%", maxHeight: "calc(100vh - 64px)" }}
src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
alt="image"
/>
Can't you set the image height to 100% the element that contains it?
On your sandbox I did this: style={{ width: 'auto', height: '100%' }} and it seemed to work.
Here is the complete code:
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open dialog
</Button>
<Dialog
open={open}
onClose={handleClose}
hasCloseButton
style={{ maxWidth: "100%", maxHeight: "100%" }}
>
<img
style={{ width: 'auto', height: '100%' }}
src="https://images.unsplash.com/photo-1565992441121-4367c2967103"
alt="image"
/>
</Dialog>
</div>