Components: md-card-actions should align at the container's bottom

[hacknaked]

Playing with Puppy Love Demo, if card-content have different heights and card-container is defined as row:

.card-container {
  display: flex;
  flex-flow: row wrap;
}

then, the md-card-actions are not aligned at the bottom. Looking in the Angular Material Specs, I could not find what is the "right" behavior in this case, but action buttons not aligned at bottom looks pretty wired.

[jelbourn]

@kara thoughts? I'm not sure if this is something the cards should be doing.

[NCC1701M]

In my opinion @hacknaked is right. It don't look very harmonic if the action position is not the same on each card in one row.

[petomalina]

Is there any temp fix for this guys?

[bennypowers]

md-card should be using flex. it's currently set to display:block

[Kyderman]

Im still having issues with this, the buttons need to be anchored down somehow, also, it would be nice if they can move nicely when the card gets smaller rather than stacking on top of eachother really badly

[joshdevries]

I was able to fix this by adding flex to md-card-content:
<md-card-content flex>

This pushes the action section to the bottom.

[spookyvale]

did you find a temp solution for that?
adding flex to the md-card-content does not fix for me. I'm using flex-layout for the container:
<div fxLayout='row' fxLayoutWrap fxLayoutGap="10px">

[Kyderman]

@spookyvale, I just changed the css for md-card to be using display:flex, with a margin-top on the card-actions

.item-card-container {
  display: flex;
  flex-direction: column;
  margin:20px;
}

md-card-actions {
  margin-top:auto;
}

[demetrio812]

I'm still having this issue with the latest version, I think this is important to solve...

[josehernandezv]

Is there any solution for this?

[shrralis]

So, what is the status of this issue? Will it be fixed or any flexible solution?

[EladBezalel]

I misread the issue.. can you reproduce the issue in stackblitz/plunker/codepen with the latest release?

[willshowell]

@EladBezalel see this,

https://stackblitz.com/edit/material2-rc0-gt2vww?file=app%2Fapp.component.html

[EladBezalel]

@willshowell thanks!

This is a quick fix

or you can come close with a simple override:

.mat-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.mat-card-content {
  display: flex;
  flex: 1;
}

The problem is how card maintain flex internally.. we might need to wrap the inner html of a card with a flex container to handle these situations.. (as i did in the stackblitz)
@mmalerba thoughts?

[jpike88]

I put in loads of effort to move to this library, and after all that effort, I can't even get simple login box to display correctly without hacking around it:

How is this not treated with a higher priority?

[andrew-landsverk-win]

Hello,

I saw there were some recent label changes to this issue and it's still present in 10.1.2. The workarounds do not seem to be working for me at least. Does anyone have any ideas for pushing these actions down in 2020? :)

Thanks!

[tariva]

@andrew-landsverk-win
possible working solution is to add a class to the mat-card if u are using card header content and foot
.card-internals { min-height: 200px; justify-content: space-between; display: flex; flex-direction: column; }
i you rather want a spacin like this
header
content

buttons
you cant adapt this solution https://stackoverflow.com/questions/29175976/move-single-element-to-the-end-of-a-flex-container
by setting
display: flex; justify-content: start; flex-direction: column; flex-wrap: wrap;
on mat card
and
margin: auto 0 0;
on the mat card actions