Material-design-lite: Card actions not aligned to the bottom of card in an mdl-grid

Created on 31 May 2016  路  6Comments  路  Source: google/material-design-lite

image

When the cards are auto-resized in an mdl-grid, the actions are not aligned to the bottom of the card if the text is longer on one card. Shouldn't actions always be aligned to the bottom? I've searched around and haven't really found a clean solution for this.

Cards pending-reproducible-sample

Most helpful comment

And I just realized we do have cards as flex display by default... whoops. I'll fix that in V2, it is leftovers from where I was doing some horizontal card work. Cards don't explicitly need to be flex display, which is why this issue happened.

All 6 comments

A codepen would be more valuable than a screen shot.

Have you put mdl-card--expand on those <div class="mdl-card__supporting-text">s?

Please provide a functioning reproduction on something like codepen. As the cards are set to work, they function as expected. You mention trying to mix a grid with them somehow, so that can confuse things. As it is, there isn't enough information here to determine whether there is a problem we need to look into internally or if this is something developers will need to handle in their own code.

Thank you.

O god i'm retarded. Adding mdl-card--expand to the supporting text totally fixed my problem.
Sorry for wasting your time.

FTR mdl-card--expand should not even work here unless you're making the card itself into a grid which isn't directly supported. Cards go within grids but shouldn't necessarily become them.

Well i didn't have mdl-card--expand set on any of the items above the mdl-card__actions.
Here's a pen to demonstrate what happened.

And I just realized we do have cards as flex display by default... whoops. I'll fix that in V2, it is leftovers from where I was doing some horizontal card work. Cards don't explicitly need to be flex display, which is why this issue happened.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

itisparas picture itisparas  路  3Comments

baldram picture baldram  路  4Comments

arturgspb picture arturgspb  路  3Comments

tleunen picture tleunen  路  5Comments

samuelcarreira picture samuelcarreira  路  4Comments