lll lll - 1 year ago 149
CSS Question

Material design lite stretch vertically mdl-cards

How do I stretch vertically mdl-cards so that everything is even out? I'd prefer the

to be stretch.

Here's an example http://codepen.io/anon/pen/grGbdb

Answer Source

There are three problems to address.

First mdl-cell elements have already the height of the "biggest" cell in the row. Therefore to make the cards the same height "make the card to be cell".

<div class="mdl-cell mdl-card mdl-shadow--2dp demo-card-wide">

The next problem would be that the mdl-card__actions is not at the bottom of the card.
To change this make the actions position absolute and and move it to the bottom.

.demo-card-wide > .mdl-card__actions {
  position: absolute;
  bottom: 0px;

Third problem:
Now the content and the actions of the biggest cars are overlapping. This is the nasty one. There is only a easy solution (as I know) if you know the height of the actions. Then add a padding-bottom to the card.

.demo-card-wide.mdl-card {
  /* ... */
  padding-bottom: 50px;

And one comment: Try to avoid the fix width of the card. Better use: mdl-cell--X-col/yyy/ from mdl grid

Look at this changed codepen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download