I have a button inside a link inside a div that's not occupying the entire height of the div so what ends up happening is that the link gets clicked but not the button. I tried giving the button a height of 100% and removing padding but it doesn't seem to work.
Here's the element:
<div
style={{
display: "flex",
gap: "20px",
flexDirection: "column",
}}
>
<Link
to="/regions"
style={{
pointerEvents: regions > 0 ? "none" : "auto",
lineHeight: "0rem",
color: "black",
}}
>
<Button
variant="outlined"
sx={{
width: "400px",
color: "white",
"&:disabled": {
backgroundColor: "rgba(255,255,255,0.1)",
color: "white",
},
}}
onClick={() => handleClick("regions")}
disabled={regions > 0 ? true : false}
>
Region Test
</Button>
</Link>
{regionScore > 0 && (
<Box sx={{ width: "400px" }}>
<LinearProgress
color="success"
variant="determinate"
value={regionScore}
sx={{
backgroundColor: "transparent",
border: "1px solid black",
height: "20px",
borderRadius: "20px",
}}
/>
</Box>
)}
</div>
Any ideas?
Related
I have the following code for a modal using Mui Modal.
Everything works except when I add more items to the cart. When this happens and the minHeight exceeds 500, it continues to 100vh and then stops and only shows 5 items, even if there are well over 5 items in the cart.
I gave the parent div overflow: auto, overflow: scroll, overflowY: scroll but it still doesn't work, any ideas?
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<div
style={{
minHeight: "500px",
width: "500px",
backgroundColor: "gray",
gap: "10px",
display: "flex",
flexDirection: "column",
overflowY: "scroll",
}}
>
{cart.map((displate) => {
return (
<Card
sx={{
height: "200px,
display: "flex",
padding: "10px",
gap: "10px",
backgroundColor: "black",
margin: "10px",
}}
>
<div
style={{
backgroundImage: `url(${displate.img})`,
backgroundSize: "cover",
backgroundPosition: "center",
height: "150px",
width: "120px",
}}
></div>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
color: "white",
}}
>
<Typography>Name: {displate.name}</Typography>
<Typography>Size: {displate.size}</Typography>
<Typography>Finish: {displate.finish}</Typography>
<Typography>Frame: {displate.frame}</Typography>
<Typography>Quantity: {displate.quantity}</Typography>
</div>
</Card>
);
})}
</div>
</Modal>
The reason it wasn't working was because each card inside the map function didn't have a minHeight so they were just adjusting their heights to fit inside the container.
Adding both a maxHeight of 100vh to the parent container and a minHeight of 150px for each element fixed the issue
I have a modal that is supposed to pop up to show the status of a transaction going through on my website. It works fine other than the fact that the backdrop dimming effect is also applied on top of the modal. My modal is supposed to be white but it ends up being a sort of dark gray. I'm not sure what I'm doing wrong.
Here is the stying for the modal
const modalStyle = {
position: 'absolute' as 'absolute',
top: 0,
left: 0,
width: "80%",
marginLeft: "auto",
marginRight: "auto",
marginTop: "150px",
marginBottom: "150px",
bgcolor: 'white',
boxShadow: 24,
p: 3,
borderRadius: "25px"
}
And here is the HTML for it:
<Modal
open={open}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
sx={modalStyle}
>
{!done ? (
<div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center" }}>
<h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Loading...</h1>
<Box style={{ display: 'flex', width: "300px", height: "300px", justifyContent: "center", }}>
<CircularProgress style={{ marginTop: "50px" }} size={150} />
</Box>
</div>) : (
<div style={{ display: "flex", flexDirection: "column", height: "100%", alignItems: "center", zIndex: "25" }}>
<h1 style={{ fontSize: "50px", textAlign: "center", fontWeight: "700" }}>Transaction Completed!</h1>
<svg className={styles.animatedCheck} viewBox="0 0 24 24">
<path d="M4.1 12.7L9 17.6 20.3 6.3" fill="none" />
</svg>
</div>)}
</Modal>
I don't really know what is going wrong. It's weird because I use a very similar modal declaration at another point in my project and it works completely as expected.
The Modal component simply renders whatever children you pass to it in front of a backdrop component -- it's up to you to style the children. This issue is happening because, in your code, you're attempting to style the Modal root, not its children.
To fix it, wrap your content in another element onto which you can apply your styles and then move your modalStyle styling to that element. For my example, I wrapped them in a Box:
<Modal
open={open}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={modalStyle}> {/* Moved here */}
...
</Box>
</Modal>
Which produced:
Working CodeSandbox: https://codesandbox.io/s/sad-christian-de6m9k?file=/demo.tsx
I need to align the title Hello John Joseph Jones horizontally on the top BUT inside the black box.
The problem that it consumes the space vertically.
I don't if my code is good. Feel free to revise if there is a better way to do this.
Codesandbox is here CLICK HERE
<Box m={3}>
<Grid
container
direction="column"
className={classes.container}
spacing={2}
>
{/* <h1>Hello John Joseph Jones</h1> */}
<Grid item xs={6} className={classes.pictureSection}>
<div className={classes.imageSection}>
<img
src="https://picsum.photos/id/237/200/300"
className={classes.img}
alt="no pic"
/>{" "}
<p className={classes.precinctNo}>PR 4838390</p>
<p className={classes.controlNo}>555555</p>
</div>
</Grid>
<Grid item xs={6} className={classes.nameAddressSection}>
<Box className={classes.fontText}>John Joseph Jones</Box>
<Box mt={1} className={classes.fontText}>
26 South Hawthorne Drive Tonawanda, NY 14150
</Box>
<Box mt={1}>
<QRCode size={80} value={"4234432"} />
</Box>
</Grid>
</Grid>
</Box>
I have edited your Code:
Inserted the new h1 tag, styled it, and changed the Grid direction from column to row.
import React from "react";
import { makeStyles } from "#material-ui/styles";
import { Box } from "#material-ui/core";
import Grid from "#material-ui/core/Grid";
import QRCode from "react-qr-code";
import { red } from "#material-ui/core/colors";
const useStyles = makeStyles(() => ({
button: {
color: "white"
},
hideButton: {
visibility: "hidden"
},
imageSection: {
display: "flex",
flexDirection: "column",
justifyContent: "center",
height: "100%"
},
img: {
height: "4cm",
width: "4cm",
},
h1: { // new
fontSize: "0.70rem",
width: "100%",
textAlign: "center",
margin: "0.1rem"
},
precinctNo: {
display: "flex",
justifyContent: "center",
margin: "0",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase",
color: "#000"
},
controlNo: {
display: "flex",
justifyContent: "flex-start",
margin: "0",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase",
color: "#000"
},
boxBorder: {
border: "3px solid black"
},
container: {
width: "8.5cm",
height: "5.5cm",
borderRadius: "3px",
border: "3px solid #000000",
color: "#00000"
},
pictureSection: {
display: "flex",
flexBasis: "100%"
},
nameAddressSection: {
display: "flex",
flexDirection: "column",
textAlign: "center",
flexBasis: "100%",
justifyContent: "space-between"
},
alignItems: {
alignSelf: "center",
textAlign: "center"
},
fontText: {
color: "#000000",
fontSize: "0.70rem",
fontWeight: "bold",
textTransform: "uppercase"
}
}));
const SampleCard = () => {
const classes = useStyles();
return (
<Box m={3}>
<Grid
container
direction="row" // new
className={classes.container}
spacing={2}
>
<h1 className={classes.h1}>Hello John Joseph Jones</h1> // new
<Grid item xs={6} className={classes.pictureSection}>
<div className={classes.imageSection}>
<img
src="https://picsum.photos/id/237/200/300"
className={classes.img}
alt="no pic"
/>{" "}
<p className={classes.precinctNo}>PR 4838390</p>
<p className={classes.controlNo}>555555</p>
</div>
</Grid>
<Grid item xs={6} className={classes.nameAddressSection}>
<Box className={classes.fontText}>John Joseph Jones</Box>
<Box mt={1} className={classes.fontText}>
26 South Hawthorne Drive Tonawanda, NY 14150
</Box>
<Box mt={1}>
<QRCode size={80} value={"4234432"} />
</Box>
</Grid>
</Grid>
</Box>
);
};
export default SampleCard;
Watch out for the comments in your return statement. (I don't know if they will break your application)
You can do that by changing the structure a little
Add a root class to hold the main box
root: {
width: "8.5cm",
height: "5.5cm",
border: "3px solid #000000",
borderRadius: "3px",
boxSizing: "border-box"
},
Remove the border from the container class
container: {
color: "#00000",
height: "100%"
},
Apply it to the parent element
<Box className={classes.root} m={3}>
Add the centered text
<Box mb={1} className={classes.fontText} align="center">
Hello John Joseph Jones
</Box>
Take a look at https://codesandbox.io/s/material-ui-forked-dvoun?file=/SampleCard.js:197-252
In the example above I add some padding to the parent element, as now it holds the border, there may be other ways of doing that to keep the style
To keep the fixed size you will need to play around with the elements
In a React project, I've create a Recharge Wallet page, which has Recharge button to recharge coins. A new page is created by overriding on another page. All the elements are created in Material UI. For some reason, all elements are overflowing through the components. Its probably CSS issue. What could be the best solution to prevent overflowing.
Following is the code reference
const navScrollStyle = makeStyles((theme) => ({
root: {
marginTop: '70px',
display: 'table',
overflowY: 'hidden',
maxWidth: 'auto',
display: 'flex',
justifyContent: 'center',
}
}));
const navBodyStyle = makeStyles((theme) => ({
root: {
flexGrow: 1,
top: "0px",
position: "absolute",
width: "100%",
height: '100vh',
textAlign: 'center',
background: 'white',
zIndex: '9',
height: '100%',
overflowY: 'auto'
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const gridClassStyle = makeStyles((theme) => ({
root: {
flexGrow: 1,
position: 'fixed',
top: '0px',
background: 'white',
flexWrap: "nowrap",
boxShadow: '5px 10px 18px #888888',
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
menuButton: {
marginRight: theme.spacing(2),
color: "purple"
},
title: {
flexGrow: 1,
textAlign: "center",
color: "black"
}
}));
const useStyles5 = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
textAlign: 'center',
width: '100%'
},
}));
const NewPage = () => {
const navBody = navBodyStyle()
const navScroll = navScrollStyle()
const gridClass = gridClassStyle()
const classes5 = useStyles5()
const NavPart = () => (
<Grid className={gridClass.root} container spacing={3}>
<Grid item xs={4} style={{ textAlign: 'left' }}>
<IconButton
edge="start"
className={gridClass.menuButton}
color="inherit"
aria-label="menu"
>
<Link to="/">
<ArrowBackIcon />
</Link>
</IconButton>
</Grid>
<Grid item xs={4} style={{ textAlign: 'center', justifyContent: 'center' }}>
<Typography variant="h6" className={gridClass.title}>
<h2>Wallet</h2>
</Typography>
</Grid>
<Grid item xs={4} style={{ textAlign: 'right', marginTop: '2%' }}>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
>
<AccountCircle style={{ fontSize: "30px" }} />
</IconButton>
</Grid>
</Grid>
)
return (
<div className={navBody.root}>
{NavPart()}
<div className={navScroll.root}>
<div className={classes5.root}>
<Button variant="contained" color="secondary">
<Link to="/purchaseCoins">
Recharge Wallet
</Link>
</Button>
<br />
<Button variant="contained" color="secondary">
<Link to="/purchaseCoins">
Recharge Wallet
</Link>
</Button>
<br />
</div>
</div>
</div>
)
}
I have purposefully added recharge wallet button to test the overflowing.
Here is the codesandbox link for much clarity: https://codesandbox.io/s/react-material-forked-71op5.
Please click on 'WALLET' button when page loads
I changed the marginTop of navScrollStyle, overflowY to auto, and assigned a zIndex to the gridClassStyle. I think it's what you were looking for. Please check the online version here on sandbox
You gave 70px to the Wallet component, and I think you can give the height value of calc (100% - 70px). You must adjust the height as much as the margin-top px.
I am using Card component from Material UI. It looks like this:
You can see both: Star and Plus icon have inherited opacity from the background image.
I want the Plus icon to have opacity 1. Is this possible? Here is code:
<Card
style={{
position: "relative",
}}
>
<IconButton
color="primary"
className={classes.star}
style={{
pointerEvents: itemEnabled ? "auto" : "none"
}}
>
{item.favorite ? <Star /> : <StarBorder />}
</IconButton>
<IconButton
color="primary"
className={classes.permission}
onClick={e => {
e.preventDefault();
e.stopPropagation();
console.log("test")
}}
>
<Add />
</IconButton>
<CardActionArea style={{
width: "100%",
pointerEvents: itemEnabled ? "auto" : "none"
}}>
<CardMedia
className={classes.media}
image={requiredImage}
style={{
opacity: itemEnabled ? 1 : 0.4,
}}
title={item.favorite ? item.link.name : item.name}
/>
</CardActionArea>
</Card>
here are some styles used in className if interested:
const styles = theme => ({
media: {
height: 140,
width: "100%"
},
star: {
position: "absolute",
right: 0,
color: "white",
zIndex: 555
},
permission: {
position: "absolute",
right: 0,
top: 30,
color: "white",
zIndex: 555
},
linksTitle: {
padding: 20
}
});