How do I specify fixed width for material card titles?

Question

I am trying to give two material cards a fixed title height, regardless of how much content they have. I would like the height of the cards to be 15px but for some reason they won't adjust.

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
  <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>

  <style>
  .demo-card-square > .mdl-card__title {
    background-color: lightblue;
    height: 50px;
  }
  </style>
</head>

<body>
  <div class="mdl-grid">

    <div class="demo-card-square mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col">
      <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__title-text">Box</h2>
      </div>
      <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aenan convallis.
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          View Updates
        </a>
      </div>
    </div>

    <div class="demo-card-square mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col">
      <div class="mdl-card__title mdl-card--expand">
        <h2 class="mdl-card__title-text">Box</h2>
      </div>
      <div class="mdl-card__supporting-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aenan convallis.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aenan convallis.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aenan convallis.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Aenan convallis.
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          View Updates
        </a>
      </div>
    </div>

  </div>
</body>

Your help is greatly appreciated!

score 1 · Accepted Answer · answered Nov 08 '16 at 21:57

1

Removing class "mdl-card--expand" is another way to fix it.

answered Nov 08 '16 at 21:57

Dragonmon

114
6

taylorsabell · Answer 2 · 2017-12-14T00:52:38.990

0

This is solved by also specifying a maximum height on the card.

max-height: 50px;

edited Dec 14 '17 at 00:52

answered Nov 08 '16 at 21:43

taylorsabell

664
5
15

How do I specify fixed width for material card titles?

2 Answers2