GreatHam
GreatHam

Reputation: 1706

Angular 4 - how to make a mat-card fill entire parent component area

I have a mat-grid-tile (parent) which contains a component app-window (child), which contains a mat-card at its root.

The app-window fills the mat-grid-tile as desired and is center-aligned both vertically and horizontally. Now I want the app-window's mat-card to do the same so that I can have a grid of equally spaced mat-cards.

How can I get the mat-card contained within app-window to fill the entire app-window? I have tried some ideas but none were successful; more details below.

StackBlitz example

Component HTML:

<mat-grid-list cols="3" rowHeight="4:3">
  <mat-grid-tile>
    <app-window></app-window>
  </mat-grid-tile>
</mat-grid-list>

Component CSS:

app-window {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

Attempted solutions and their results:

Upvotes: 15

Views: 24760

Answers (1)

robbieAreBest
robbieAreBest

Reputation: 1771

Hope you have figured this out by now but I'll provide this solution to others who might be seeing similar issues.

The reason height:100%; extends past the parent container is the mat-card box-sizing property is content-box by default. If you set it to border-box it will subtract the padding while determining the size to fill the parent.

The following should work for you:

app-window mat-card{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

Upvotes: 25

Related Questions