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>
...
Related
<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?
How do I make the following menu bar the same but with the log out button on the right side?
Code:
<main>
<AppBar>
<Toolbar>
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/")}>
Home
</Typography>
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/projects")}>
Projects
</Typography>
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/team")}>
Goals
</Typography>
{!session &&
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
Log in
</Typography>
}
{session &&
<Typography variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
log out
</Typography>
}
</Toolbar>
</AppBar>
<Toolbar />
</main>
I am very tired as I have been struggling with this flippin' error for the past 1.5 hours
you can add divs like this and use justify-between and flex to add space between them.
<main>
<AppBar>
<Toolbar>
<div className="flex justify-between">
<div>
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/")}>
Home
</Typography>
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/projects")}>
Projects
</Typography>
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/team")}>
Goals
</Typography>
{!session &&
<Typography style={{ marginRight: 16 }} variant="h6" className="text-lg cursor-pointer" onClick={() => redirect("/login")}>
Log in
</Typography>
}
</div>
<div>
{session &&
<Typography variant="h6" className="text-lg cursor-pointer right-0" onClick={() => signOut()}>
log out
</Typography>
}
</div>
</div>
</Toolbar>
</AppBar>
<Toolbar />
</main>
Just add this in your CSS.
It will select the last <Typography> (which in your case is log out) in your <Toolbar> and send it to the rightmost side.
Toolbar Typography:last-child {
float: right;
}
My implementation is to utilize css flexbox. I group the three elements with a Box and implement CSS flexbox on it.
import React from "react";
import { AppBar, Box, Toolbar, Typography } from "#mui/material";
function App() {
return (
<AppBar>
<Toolbar sx={{ display: "flex" }}>
<Box sx={{ display: "flex", flex: "1 1 0" }}>
<Typography
style={{ marginRight: 16 }}
variant="subtitle2"
className="text-lg cursor-pointer"
// onClick={() => redirect("/")}
>
Home
</Typography>
<Typography
style={{ marginRight: 16 }}
variant="subtitle2"
className="text-lg cursor-pointer"
// onClick={() => redirect("/projects")}
>
Projects
</Typography>
<Typography
style={{ marginRight: 16 }}
variant="subtitle2"
className="text-lg cursor-pointer"
// onClick={() => redirect("/team")}
>
Goals
</Typography>
</Box>
{/* session */}
{false && (
<Typography
style={{ marginRight: 16 }}
variant="subtitle2"
className="text-lg cursor-pointer"
// onClick={() => redirect("/login")}
>
Log in
</Typography>
)}
{/* lets assume that session is true */}
{true && (
<Typography
variant="subtitle2"
className="text-lg cursor-pointer right-0"
// onClick={() => signOut()}
>
log out
</Typography>
)}
</Toolbar>
</AppBar>
);
}
export default App;
You may Interact my own implementation in the codesandbox just click here
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 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>