I have a settings button on click of which it should show a menu anchored right to the settings button as shown
since react material menu will do the same job I used menu like below
<StyledMenu
id="customized-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}>
<StyledMenuItem>
<div style={{ width: '70%', fontSize: '14px', padding: '5px' }}>
<div>
<img src={props.icon} alt='' style={{ width: '18px', height: '18px', }}></img>
Brigthness
</div>
<div><Slider value={value ? value : 30} onChange={handleChange} aria-labelledby="continuous-slider" /></div>
</div>
<div style={{ width: '30%', padding: '5px' }}>
<div>Reset</div>
<div><input style={{width:'20px',height:'20px'}} text="om" /></div>
</div>
</StyledMenuItem>
</StyledMenu>
Problem
cannot slide smoothly as when I click the slider menu will act as a button
How to disable the menus button behaviour
Code sandbox demo
As the docs said, you can disable ripple effect
Please add disableRipple property at your StyledMenu and StyledMenuItem
Check the example here.
Related
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.
I want to hide this material UI button if user is logged in but cant do conditional rendering because it will mess up the whole display flex items so i just want to do display none, is it possible to do display none conditionally?
<Button
variant="contained"
color="primary"
size="large"
style={{ paddingLeft: "50px", paddingRight: "50px" }}
className={classes.primaryAction}
>
{content["login"]}
</Button>
yes it is possible, but I belive you will hit the very same issue, it it dissapears, it will break your flex anyways, but you can try this.
<Button
variant="contained"
color="primary"
size="large"
style={{ paddingLeft: "50px", paddingRight: "50px", display: isLoggedIn ? "none" : "block" }}
className={classes.primaryAction}
>
{content["login"]}
</Button>
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 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>
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>