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>
Related
Basically, I have three buttons as seen in the image below. When I click on the button's actual text, it redirects, but if I click anywhere else inside the button, nothing happens.
<Button
variant="outlined"
size="large"
color="inherit"
style={{ marginRight: '1rem' }}
sx={{
':hover': {
opacity: '',
borderColor: '#5865f2', // theme.palette.primary.main
},
}}
>
<Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio">PortFolio</Link>
</Button>
My goal is to make it redirect regardless of whether we click inside the button's text or not.
Wrap Your Buttons with < Link > button </ Link >
<Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio">PortFolio
<Button
variant="outlined"
size="large"
color="inherit"
style={{ marginRight: '1rem' }}
sx={{
':hover': {
opacity: '',
borderColor: '#5865f2', // theme.palette.primary.main
},
}}
>
</Button>
</Link>
Try this:
<Link style={{ textDecoration: 'none', color: 'white' }} to="/portfolio" className="home-left-portfolio"><Button
variant="outlined"
size="large"
color="inherit"
style={{ marginRight: '1rem' }}
sx={{
':hover': {
opacity: '',
borderColor: '#5865f2', // theme.palette.primary.main
},
}}
>
PortFolio
</Button>
</Link>
Zamiast
<button><link></link></button>
sprobuj
<link><button></button></link>
Powinno pomoc
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 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.
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>