htmlcssmaterial-designmaterial-design-lite

MDL card doesn't align on top of parent

I use the mdl framework for designing my webapp.

<div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell mdl-cell--top mdl-cell--6-col">
...
<div class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell mdl-cell--top mdl-cell--6-col">
...
<div ng-init="showLmsSwitch()" class="demo-card-wide mdl-card mdl-shadow--2dp mdl-cell  mdl-cell--6-col  mdl-cell--top">
...

These are the three cards which are displayed in the picture.

Webapp

The last one on the bottom (steuerung logitech media server) has the class mdl-cell--top so it should align on the top of the parent, but it doesn't. Anybody knows why?

Thanks in advance!

Solution

  • All three cards in your layout are in the same 'row', so when the first one gets 6 columns (of the available 12 of each row) and the second one gets the other 6 columns, your third card gets another 6 columns but has already been pushed to the next row.

    You have to use multiple mdl-grid components to achieve this layout:

    <div class="mdl-grid">
  <div class="mdl-grid mdl-cell--6-col">
    <div class="mdl-cell mdl-cell--12-col">Content</div>
    <div class="mdl-cell mdl-cell--12-col">Content</div>
  </div>
  <div class="mdl-cell--6-col">Content
  </div>
</div>

    I have updated your pen here.