Currently, I am working on mapping material-ui cards with dynamic content from a JSON object, resulting in varying card heights. I have successfully set a fixed height for each card, but the content is not aligned correctly.
You can see the issue in this screenshot. All the cards are displayed in rows of three, and the last card's content is misaligned compared to the others.
I am looking to either fix the button and graph at the bottom of the card or set a fixed height for the content above the graphs to ensure they stay at the bottom. I have been struggling to achieve this and would appreciate any help.
Below is my code snippet:
<Grid key={item.Qid} item xs={12} sm={4}>
<Card className={classes.cards}>
<div className={classes.details}>
<CardContent>
<Typography component="h5" variant="h5" align="center">
Question
</Typography>
<Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
{item.Qid}
</Typography>
<Typography variant="subtitle1" color="textSecondary">
{item.Question}
</Typography>
<Typography component="h5" variant="h5" align="center" className={classes.space}>
Sentiment
</Typography>
<Typography variant="subtitle1" color="textSecondary" align="center" className={classes.space}>
{item.Sentiment}
</Typography>
</CardContent>
<CardMedia className={classes.cover}>
{item.Sentiment ? renderPieChartForSentimentAnalysis(item.SentimentScore) : "No data to display"}
</CardMedia>
<div align="center" className={classes.space}>
<Button variant="outlined" color="primary" onClick={() => setupDialog(item.Answers)}>
Answers
</Button>
</div>
</div>
</Card>
</Grid>;
And here are the styles used:
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
cards: {
padding: theme.spacing(2),
height: "95%",
},
details: {
display: "flex",
flexDirection: "column",
},
space: {
marginTop: theme.spacing(1),
},
}));