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>;
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.
<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?
I have a problem on aligning the texts on the second line. It needs to be aligned with the first line.
Codesandbox CLICK HERE
<Card sx={{ maxWidth: 200 }}>
<CardMedia
component="img"
height="140"
image="/static/images/cards/contemplative-reptile.jpg"
alt="green iguana"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
Lizard
</Typography>
<Box>
<Typography variant="body2" color="error">
• Hello how are you doing there?
</Typography>
</Box>
<Box>
<Typography variant="body2" color="error">
• Hi how are you doing there?
</Typography>
</Box>
</CardContent>
<CardActions>
<Button size="small">Share</Button>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
Put the bullet inside another Typography component and align it horizontally:
<Stack direction="row" gap={1}>
<Typography variant="body2" color="error">
•
</Typography>
<Typography variant="body2" color="error">
Hello how are you doing there?
</Typography>
</Stack>
Before
After
Live Demo
Please try using ul html element and add some styles.
...
<CardContent>
<ul>
<li>
<Typography variant="body2" color="error">
Hello how are you doing there?
</Typography>
</li>
<li>
<Typography variant="body2" color="error">
Hi how are you doing there?
</Typography>
</li>
</ul>
</CardContent>
...
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 want to achieve the given style.
Currently, I have
<Box display="flex" flexDirection="row" alignItems="center" width={1}>
<Box flexGrow="1">
<Typography variant="h6">
{subscription.PlanName}
<Box
px={1}
py={0.5}
color={"primary.contrastText"}
className={classes.success}
display="flex"
alignItems="center"
justifyContent="space-between"
>
{subscription.Status}
</Box>
</Typography>
<Typography variant="caption" component="div">Purchased on: <b>{moment(subscription.StartDate).format("DD-MM-YYYY")}</b></Typography>
<Typography variant="caption" component="div">Expiring on: <b>{moment(subscription.EndDate).format("DD-MM-YYYY")}</b></Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
onClick={Actions.openBillingDrawer}>
UPDATE CREDITS
</Button>
</Box>
<Box>
<Button
variant="contained"
color="primary"
onClick={Actions.openBillingDrawer}>
UPGRADE PLAN
</Button>
</Box>
Also, the UPDATE CREDITS button is different from which I am currently using. Please provide the correct button for that too.
it is not exactly your goal, but its a good place to start. You've got the right separation of boxes, right size of the green box and a iconButton:
<Box
display="flex"
flexDirection="row"
alignItems="center"
width={1}
justifyContent="space-between"
>
<Box>
<Box display="flex" alignItems="flex-end" margin="5px 0">
<Typography variant="h4" style={{ lineHeight: "0.8" }}>
Basic Plan
</Typography>
<Box
color="primary.contrastText"
bgcolor="success.main"
fontSize="8px"
padding="2px 4px"
marginLeft="6px"
>
ACTIVE
</Box>
</Box>
<Typography variant="caption" component="div" color="textSecondary">
Purchased on: <b>01-01-2020</b>
</Typography>
<Typography variant="caption" component="div" color="textSecondary">
Expiring on: <b>02-02-2020</b>
</Typography>
</Box>
<Box>
<Button
variant="outlined"
color="primary"
endIcon={<ArrowDropDownIcon />}
>
UPDATE CREDITS
</Button>
<Button variant="contained" color="primary">
UPGRADE PLAN
</Button>
</Box>
</Box>