4

How do I stretch vertically mdl-cards so that everything is even out? I'd prefer the mdl-card__suporting-text to be stretch.

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

123 456 789 0
  • 10,565
  • 4
  • 43
  • 72
  • Assign a height for mdl-card__suporting-text in your css. Or nest the cards in a row element with a set height. – andnowchris Mar 31 '16 at 19:24
  • But what happens if one of card's content is longer than the others? Then other cards will not be the same height, so it'll just be back to square 1 – 123 456 789 0 Mar 31 '16 at 19:27
  • if you set the height for mdl-card__suporting-text in your CSS then all of the elements with that class name will have that height. So if you set height:200px; in mdl-card__suporting-text then all three cards (which contain the mdl-card__suporting-text class name) will be the same height – andnowchris Mar 31 '16 at 19:29
  • Right, what I'm saying is in the future if one of the card's content changes and cannot be acommodate to 200px then that also means having to update the style again to 200px. Looking if it is possible in a dynamic way and not a static way. – 123 456 789 0 Mar 31 '16 at 19:35
  • I understand now. have you considered allowing for a scroll bar if the content exceeds the height? if so you can keep the height at 200px and set the overflow:auto; in the mdl-card__suporting-text element and when/if the content exceeds the height then a scrollbar will appear and allow the user to scroll within that element. – andnowchris Mar 31 '16 at 19:46

3 Answers3

2

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">
//...
</div>

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

hr_117
  • 9,589
  • 1
  • 18
  • 23
  • Yes seems only to work with firefox. I will have a look to it again tomorrow. There was a working solution, but can't remember how. – hr_117 Mar 31 '16 at 22:13
  • Thank you. What do you mean avoid fixed width of the card? Can you please elaborate? – 123 456 789 0 Apr 01 '16 at 18:07
1

You can add an empty <div class="column-expander"></div> at the point you want to add a spacer, and this to your css:

.column-expander {
     flex-grow: 1;
}
naught101
  • 18,687
  • 19
  • 90
  • 138
-1

Avoid demo mdl components

All you need to do is put the card components inside a grid cell, like:

<div class="mdl-card-wide mdl-cell mdl-cell--N-col>

The mdl grid system has default spaces, so if you put a card component inside a cell, the card will automatically adopt the default grid space.

This is the codepen example:

adding space between cards

<div class="mdl-grid">
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
            <div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone mdl-shadow--4dp">
              <div class="mdl-grid mdl-grid--no-spacing">
                <div class="mdl-cell mdl-cell--6-col green">
                </div>
                <div class="mdl-card-wide mdl-cell mdl-cell--6-col mdl-shadow">
                  <div class="mdl-card__supporting-text">
                    <h4>Tablet</h4>
                    <p>Ni un solo pixel desaprovechado, el contenido de tu pagina se ajusta a todo.</p>
                  </div>  
                </div>
              </div>
            </div>
          </div>

Also remember this, card components can be square or wide, but if you put the card inside a cell, you will no need to write square or wide.

And avoid mdl demo components.

Jean Carlos Ayala Ortiz
  • 6
  • 1
  • 1