CODEWITHSUNDEEP
cssresponsive-designangular-material
JoachimR
JoachimR

Reputation: 5258

Angular Material Card fill height of parent

I am trying to figure out how to set the height of a md-card to fill its parent. Here is my example:

<div ng-controller="AppCtrl" ng-app="MyApp">
  <div layout="column" layout-gt-sm="row" layout-padding="layout-padding" layout-fill="layout-fill">

    <div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill">
      <div flex="flex" layout="row">
        <md-content flex="flex">
          <md-card>
            <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
          </md-card>
        </md-content>
      </div>
    </div>

    <div flex="flex" flex-gt-sm="33" layout="column">
      <md-card flex="flex">
        <md-card-content>
          <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p>
        </md-card-content>
        <div layout="column" layout-gt-sm="row" class="md-actions">
          <md-button flex="flex" ng-click="asdf()">asdf
            <md-tooltip>asdf</md-tooltip>
          </md-button>
          <md-button flex="flex" ng-click="qqqqqqqq();">qqqqqqqq
            <md-tooltip>qqqqqqqq</md-tooltip>
          </md-button>
        </div>
      </md-card>
      <md-card flex="flex">
        <md-card-content>
          <div layout="column">
            <p>some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content some very long content </p>
        </md-card-content>
      </md-card>
    </div>

  </div>
</div>

http://codepen.io/anon/pen/BNPBwJ

Can anyone help ?

Upvotes: 10

Views: 15017

Answers (2)

metalkat
metalkat

Reputation: 620

You seem to be making it a little over complicated. It works when you simplify it like this:

<md-content layout="row" flex>
  <md-card flex="33">
    <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
  </md-card>
    ...

instead of

<div flex="flex" flex-gt-sm="33" layout="column" layout-fill="layout-fill">
  <div flex="flex" layout="row">
    <md-content flex="flex">
      <md-card>
        <md-card-content><span>can I please be as high as the other two cards together</span></md-card-content>
      </md-card>
    </md-content>
  </div>
</div>

In my own code I also added a class to md-content to set the height specifically, and the cards fill the space from there.

Upvotes: 7

Igor Donin
Igor Donin

Reputation: 412

I'm new to Angular Material, so I don't have an answer. What I can tell you is that I applied some style="background-color: red; padding: 5px;" to the elements and, down to md-content, those elements are all layout-filled.

I also noticed that md-card's height is being inherited from body and it's 100%.

That said, it does work if you lose the md-content directive. I'm sorry I can't explain why, and I could also use help understanding this behavior.

enter image description here

Upvotes: 1

Related Questions