Currently, I am in the process of developing a web interface that displays various processes and services. The information is presented in React cards that support expand/collapse functionality. However, I am facing an issue where expanding one card affects the height of the other cards, which I do not want to happen. As shown in this image, the ideal behavior would be for all cards to maintain their original height when expanded.
In the custom class for the cards:
const infoCard = makeStyles({
root: {
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "-webkit-fill-available"
}
})
const createCards:
const classes = infoCard();
...
...
return (
<React.Fragment>
<Card className={classes.root}>
<CardContent> "Add content" </CardContent>
<Collapse>
<CardContent> "Add content" </CardContent>
</Collapse>
</Card>
</React.Fragment>
)
I am also looking to have additional rows of cards below this section. If anyone has insights on how to address this issue, your input is greatly appreciated. Thank you!