CODEWITHSUNDEEP
reactjsmaterial-ui
Peter
Peter

Reputation: 407

How to make Material-UI CardActions always stick to the bottom of parent

The blue CardActions section of the 2nd Material-UI card is not staying at the bottom which makes the page looks not concise.

I already tried to set the height to 100% for CardContent but nothing has changed.

I created a sandbox for illustration of the problem:

https://codesandbox.io/s/happy-glitter-7vyep

I would like that the Material-UI CardAction stays always at the bottom of the container, no matter how many items I have in the CardContent.

Upvotes: 8

Views: 13500

Answers (3)

Kristofer Källsbo
Kristofer Källsbo

Reputation: 1087

I had the same issue and the accepted answer partly solved the problem but definitely put me on the right track. This solution's problem is that other card components are moved around. In my case I got a space between the header and an image at the top of the card due to the space-between.

So on the card root I did:

<Card sx={{ 
    height: "100%",
    display: "flex",
    flexDirection: "column",
  }}>

And then on the CardActions I did:

<CardActions disableSpacing sx={{ mt: "auto" }}>

Upvotes: 8

MMMTroy
MMMTroy

Reputation: 1267

The accepted answer will center the content within the card. This often leads to undesirable alignment problems. If instead you'd like the CardContent to maintain the normal spacing below the CardHeader, and "push" the Actions to the bottom of the card, this way works better.

The CSS

.MuiCard-root{
  display: flex;
  flex-direction: column;
}

The Card

<Card>
    <CardHeader>...</CardHeader>
    <CardContent>...></CardContent>
    <div className={"flex-grow"} />
    <CardActions>...</CardActions>
</Card>

Note that this example makes use of tailwindcss with the "flex-grow" property. If you aren't using tailwind, simply make sure the div has flex-grow:1 applied to it.

Upvotes: 2

Amarjit Singh
Amarjit Singh

Reputation: 1192

you have to add following properties to .MuiCard-root

.MuiCard-root{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

enter image description here

Other Method is :

.MuiCard-root{
  display: flex;
  flex-direction: column;
}
.MuiCardActions-root{
   margin-top: auto;
}

Upvotes: 23

Related Questions