<Grid container spacing={2}>
<Grid item xs={12} md={4} lg={3}>
<Card>
<CardActionArea>
<CardMedia
width={1}
alt="Meal Products POS"
sx={{ maxWidth: 400 }}
component="img"
image={themesObj.pos.featuredProduct}
/>
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
Meal Products POS
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={4} lg={3}>
<Card>
<CardActionArea>
<CardMedia
width={1}
alt="Barcode normal products POS"
sx={{ maxWidth: 400 }}
component="img"
image={themesObj.pos.normalProduct}
/>
<CardContent sx={{ textAlign: 'center' }}>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
Barcode normal products POS
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
<Grid item xs={12} md={4} lg={3}>
<Card>
<CardActionArea>
<CardContent sx={{ textAlign: 'center' }}>
<NotInterestedIcon sx={{ fontSize: 200 }} />
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>
Return a product
</Typography>
</CardContent>
</CardActionArea>
</Card>
</Grid>
</Grid>
I have this grid component, and it displays the following:
It is depending on the image height, it makes the card height.
I want to make the height the same for all the cards, dynamically. but how?
I am using the newest version of MUI as of now (v5.10.3).
what to do?
Related
I have three elements on my page, which are pictures, Card(containing picture and several typography), a Button. The direction is column.
The problem is the pictures and the button will be cut due to the screen resolution. How can I make those three elements inside the page without being cut?
This is what I expect:
The problem, the pictures and the button will be cut.
Here is my code:
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
width: "100%",
height: "100%",
overflow: 'auto',
}}
>
<Grid
container
direction="column"
alignItems="center"
>
<Grid item>
<CardMedia
component="img"
image="logo.png"
alt="logo"
sx={{
width: { xs: '80%', sm: '100%', md: '100%', lg: '100%', xl: '100%' }
}}
style={{ margin: '0 auto' }}
/>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="center">
<Grid item xs={9} sm={8.6} md={6} lg={5} xl={4}>
<Card
sx={{
backgroundColor: 'white',
borderRadius: '4px'
}}
>
<Box
sx={{mt:4, mb:4, mx:4}}
>
<Box>
<Stack
direction={{xs: "column", sm: "row"}}
alignItems={{xs: "center", sm: "flex-start"}}
justifyContent={{xs: "center", sm: "flex-start"}}
spacing={{ xs: 0, sm: 3}}
>
<CardMedia
component="img"
sx={{ width: {xs: 120, sm: 160}, height: {xs: 120, sm: 160} }}
image="image.png"
alt="image"
style={{borderRadius: "6px"}}
/>
<Box
sx={{wordWrap: "break-word", overflow: "hidden"}}
>
<Typography>
.....
</Typography>
<Typography>
.....
</Typography>
</Box>
</Stack>
</Box>
</Box>
<Box
sx={{mx:4, mb: 10, wordWrap: "break-word", overflow: "hidden"}}
>
<Box>
<Typography>
.....
</Typography>
<Typography>
.....
</Typography>
</Box>
<Box
sx={{mt:2}}
>
<Typography>
.....
</Typography>
<Typography>
.....
</Typography>
</Box>
</Box>
</Card>
</Grid>
</Grid>
<Grid container direction="row" justifyContent="center">
<Grid item xs={9} sm={8.6} md={6} lg={5} xl={4}>
<Button
onClick={() => setStep(2)}
>
Next
</Button>
</Grid>
</Grid>
</Box>
Try to add some padding to container element.
I have this MUI App bar which contains an image, some text, and a box containing an Icon along with some info on the logged in user. I am having difficulty forcing the box with user info to be right aligned. I cannot get it to go to the right edge of the page. I can only get it to stick to the end of the last Box.
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<div id="app-bar-box" style={{ width: "100%", display: "flex" }}>
<Box id="logo-env-txt-box" justifyContent="left" style={{ display: "flex", alignItems: "center" }}>
<a href="/home">
<SVGLOGO className="logo_stack" />
<SVGLOGOHORI className="logo" />
</a>
<Typography className={classes.envFlag} hidden={hidden}>
You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
here to go to production.
</Typography>
</Box>
<Box id="user-info-box" justifyContent="right" style={{ display: "flex", alignItems: "center", width: "400px", height: "64px" }}>
<i class="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
<Box style={{ marginLeft: "10px" }}>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
John Doe Admin
</Typography>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
Product Lead
</Typography>
</Box>
</Box>
</div>
</Toolbar>
</AppBar>
(Repost)
No need to use width for your div user-info-box.
You can use justifyContent : "space-between" for your first element and you can remove both justifyContent : "left" and justifyContent : "right" of your children elements.
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<div id="app-bar-box" style={{ width: "100%", display: "flex", justifyContent: "space-between" }}>
<Box id="logo-env-txt-box" style={{ display: "flex", alignItems: "center" }}>
<a href="/home">
<SVGLOGO className="logo_stack" />
<SVGLOGOHORI className="logo" />
</a>
<Typography className={classes.envFlag} hidden={hidden}>
You are on the {process.env.REACT_APP_ENVIRONMENT} environment. Click{" "}
here to go to production.
</Typography>
</Box>
<Box id="user-info-box" style={{ display: "flex", alignItems: "center", height: "auto" }}>
<i class="dds__icon dds__icon--user" style={{ fontSize: "24px", color: "#636363", marginRight: "10px" }}></i>
<Box style={{ marginLeft: "10px" }}>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
John Doe Admin
</Typography>
<Typography style={{ color: "#636363", fontWeight: 400, fontSize: 14 }}>
Product Lead
</Typography>
</Box>
</Box>
</div>
</Toolbar>
</AppBar>
I have a dialog popup using Material UI where I cannot get rid of the whitespace above the title. I've applied a background colour to the title and content area, but this then left a white margin at the top, which I can't seem to get rid of.
Any idea on how to do this?
<Dialog
id="myDialog"
classes={{ paper: classes.dialog }}
onClose={handleCloseTagInstructions}
open={openTagInstructions}
aria-labelledby="form-dialog-title"
fullWidth={true}
>
<DialogActions>
<IconButton
className={classes.customizedButton}
onClick={handleCloseTagInstructions}
>
<CloseIcon />
</IconButton>
</DialogActions>
<DialogTitle id="helper-dialog-title" style={{ backgroundColor: '#eeeeee' }}>
<Typography variant="h5">White's Semi-Open Files at</Typography>
</DialogTitle>
<DialogContent style={{ backgroundColor: '#f5f5f5' }} dividers>
<Typography variant="h6">White's Strategy</Typography>
<Typography paragraph="true">Blah</Typography>
<Typography variant="h6">Black's Strategy</Typography>
<Typography paragraph="true">???</Typography>
<Typography variant="h6">Notes</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Typography paragraph="true">Blah.</Typography>
</Grid>
<Grid item xs={6}>
<Paper width="5%" id="board3"></Paper>
</Grid>
</Grid>
</DialogContent>
</Dialog>;
try changing the dialog margin
dialog { margin-top: -10px !important; }
here is an example with your code :
<Dialog
style="margin-top: -10px"
id="myDialog"
classes={{ paper: classes.dialog }}
onClose={handleCloseTagInstructions}
open={openTagInstructions}
aria-labelledby="form-dialog-title"
fullWidth={true}
>
<DialogActions>
<IconButton
className={classes.customizedButton}
onClick={handleCloseTagInstructions}
>
<CloseIcon />
</IconButton>
</DialogActions>
<DialogTitle id="helper-dialog-title" style={{ backgroundColor: '#eeeeee' }}>
<Typography variant="h5">White's Semi-Open Files at</Typography>
</DialogTitle>
<DialogContent style={{ backgroundColor: '#f5f5f5' }} dividers>
<Typography variant="h6">White's Strategy</Typography>
<Typography paragraph="true">Blah</Typography>
<Typography variant="h6">Black's Strategy</Typography>
<Typography paragraph="true">???</Typography>
<Typography variant="h6">Notes</Typography>
<Grid container spacing={3}>
<Grid item xs={6}>
<Typography paragraph="true">Blah.</Typography>
</Grid>
<Grid item xs={6}>
<Paper width="5%" id="board3"></Paper>
</Grid>
</Grid>
</DialogContent>
</Dialog>;
I have four columns in a Grid container, each with the following structure:
<Grid item>
<Typography>Big Title 1</Typography>
<Card className={classes.stretchMe}>
<CardContent>
Content
</CardContent>
</Card>
</Grid>
I would like the Card with class stretchMe to stretch to the bottom of the parent Grid item, but because each Card has a Typography component above it, it stretches beyond the height of the parent div.
How do I get all the Cards to stretch to the bottom of the parent Grid item and no further (i.e. minus the height of the Typography)?
Here is a slightly more complex version of the code:
import React from 'react';
const useStyles = makeStyles(theme => ({
divider: {
borderBottom: `1px solid ${theme.palette.divider}`,
},
stretchMe: {
height: '100%',
},
}));
const Cards= () => {
const classes = useStyles();
return (
<Grid container item xs={12} spacing={3} justify="space-between" alignItems="stretch">
<Grid item xl={2} lg={2} md={6} xs={12} >
<Typography variant="h4" >
Big Title 1
</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 1</Typography>
<Avatar />
</CardContent>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 2</Typography>
<Typography variant="h4">Content</Typography>
</CardContent>
<CardContent className={classes.divider}>
<Grid container>
<Grid item xs={6}>
<Typography variant="h6">Little Title 3</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="h6">Little Title 4</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item xl={4} lg={4} md={6} xs={12} >
<Typography variant="h4" >
Big Title 2
</Typography>
<Card className="classes.stretchMe">
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid item xl={3} lg={3} md={6} xs={12} >
<Typography variant="h4" >
Big Title 3
</Typography>
<Card className="classes.stretchMe">
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid item xl={3} lg={3} md={6} xs={12}>
<Typography variant="h4">
Big Title 4
</Typography>
<Card className="classes.stretchMe">
<CardContent className={classes.divider}>
<div className={classes.teamProfile}>
<Avatar/>
</div>
<div className={classes.teamProfile}>
<Avatar/>
</div>
<div className={classes.teamProfile}>
<Avatar/>
</div>
<div className={classes.teamProfile}>
<Avatar/>
</div>
</CardContent>
</Card>
</Grid>
</Grid>
);
};
export default Cards;
Many thanks,
Katie
EDIT
Here is the problem - the Grid items are stretching beyond the Grid containers
And here is the desired output:
My suspicion is that the Big titles are pushing the Cards down?
Pass the prop as a variable using JSX, not as a string. Do:
<Card className={classes.stretchMe}>
Instead of:
<Card className="classes.stretchMe">
UPDATE
Use flex:1 on the cards so they use all the remaining space
Set the sub Grids with the container and direction="column" to that the elements are correctly placed.
The code should look like this:
const useStyles = makeStyles((theme) => ({
divider: {
borderBottom: `1px solid ${theme.palette.divider}`
},
stretchMe: {
height: "100%",
flex: 1
}
}));
const Cards= () => {
const classes = useStyles();
return (
<Grid
style={{backgroundColor:"cyan"}}
container
xs={12}
spacing={3}
justify="space-between"
alignItems="stretch"
>
<Grid container direction="column" item xl={2} lg={2} md={6} xs={12}>
<Typography variant="h4">Big Title 1</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 1</Typography>
<Avatar />
</CardContent>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 2</Typography>
<Typography variant="h4">Content</Typography>
</CardContent>
<CardContent className={classes.divider}>
<Grid container>
<Grid item xs={6}>
<Typography variant="h6">Little Title 3</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="h6">Little Title 4</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid container direction="column" item xl={4} lg={4} md={6} xs={12}>
<Typography variant="h4">Big Title 2</Typography>
<Card className={classes.stretchMe}>
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid container direction="column" item xl={3} lg={3} md={6} xs={12}>
<Typography variant="h4">Big Title 3</Typography>
<Card className={classes.stretchMe}>
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid container direction="column" item xl={3} lg={3} md={6} xs={12}>
<Typography variant="h4">Big Title 4</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
</CardContent>
</Card>
</Grid>
</Grid>
);
};
export default Cards;
This is because you passed the className prop as a string, not a variable.
So, correct format should be className={classes.stretchMe}
import React from 'react';
const useStyles = makeStyles((theme) => ({
root: {
height: "100%"
},
divider: {
borderBottom: `1px solid ${theme.palette.divider}`,
"&:last-child": {
flex: "1"
}
},
stretchMe: {
display: "flex",
flexDirection: "column",
flex: "1"
},
gridItem: {
display: "flex",
flexDirection: "column"
}
}));
const Cards= () => {
const classes = useStyles();
return (
<Grid container spacing={2} className={classes.root}>
<Grid item xs={3} className={classes.gridItem}>
<Typography variant="h4">Big Title 1</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 1</Typography>
<Avatar />
</CardContent>
<CardContent className={classes.divider}>
<Typography variant="h6">Little Title 2</Typography>
<Typography variant="h4">Content</Typography>
</CardContent>
<CardContent className={classes.divider}>
<Grid container direction="row">
<Grid item xs={6}>
<Typography variant="h6">Little Title 3</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
<Grid item xs={6}>
<Typography variant="h6">Little Title 4</Typography>
<Typography variant="h4">Content</Typography>
</Grid>
</Grid>
</CardContent>
</Card>
</Grid>
<Grid item xs={3} className={classes.gridItem}>
<Typography variant="h4">Big Title 2</Typography>
<Card className={classes.stretchMe}>
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid item xs={3} className={classes.gridItem}>
<Typography variant="h4">Big Title 3</Typography>
<Card className={classes.stretchMe}>
<CardContent>Content</CardContent>
</Card>
</Grid>
<Grid item xs={3} className={classes.gridItem}>
<Typography variant="h4">Big Title 4</Typography>
<Card className={classes.stretchMe}>
<CardContent className={classes.divider}>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
<div className={classes.teamProfile}>
<Avatar />
</div>
</CardContent>
</Card>
</Grid>
</Grid>
);
};
export default Cards;
I am using highcharts inside Flex to make it responsive across all screen sizes but its not becoming responsive for mobile screens. Below is my code in reactJs and issue is replicated at
https://codesandbox.io/s/highcharts-react-demo-s31oo
<div>
<Box display="flex" flexWrap="wrap" flexDirection="row">
<Box m={0.5} style={{ flexBasis: "48%", minWidth: '0' }}>
<LineChart
chartData={ChartData}
/>
</Box>
<Box m={0.5} style={{ flexBasis: "48%", minWidth: '0' }}>
<LineChart
chartData={ChartData2}
/>
</Box>
</Box>
</div>
What's wrong in my design?
can you use flexGrow: 1
<div>
<Box display="flex" flexWrap="wrap" flexDirection="row">
<Box m={0.5} style={{ flexBasis: "48%", minWidth: "0", flexGrow: 1 }}>
<Chart chartData={options} />
</Box>
<Box m={0.5} style={{ flexBasis: "48%", minWidth: "0", flexGrow: 1 }}>
<Chart chartData={options} />
</Box>
</Box>
</div>