CODEWITHSUNDEEP
angularangular-materialangular2-directivesangular-material2
user2301
user2301

Reputation: 1967

How to fix the height of the md-card inside md-grid-list in Angular2?

I am using "@angular/material": "2.0.0-beta.2" version. To display tiles, I have used md-card inside md-grid-list. I have added the attribute rowHeight to the md-grid-list. Even though the rowHeight is defined, the cards in the row are of not the same height. What attribute I need to use with the md-card to have the same height for all the cards in the row?

<md-grid-list cols="4"  rowHeight="250px" gutterSize="20px">
  <md-grid-tile  *ngFor="let data of myData">
      <md-card [style.background]="'lightblue'">    
    <md-card-title></md-card-title>
    <md-card-title></md-card-title>
    <md-card-content>
    <h2>    
    </h2>
    </md-card-content>  
    </md-card>
  </md-grid-tile>
</md-grid-list>

Upvotes: 0

Views: 4408

Answers (1)

anoop
anoop

Reputation: 3822

Set 100% minHeight attributes on your md-card to adjust the height only and set minwidth also to fill the md-grid-tile

Like:

[style.minHeight]="'100%'" [style.minWidth]="'100%'"

See Plunker for example.

Upvotes: 1

Related Questions