Skip to content

Commit

Permalink
fix(card): prevent content from overlapping footer (#5583)
Browse files Browse the repository at this point in the history
* Prevents content from overlapping the `md-card-footer` component by making the footer `position: static`.
* Uses content projection to ensure that the footer will always be at the bottom of a card.

Fixes #5486.
  • Loading branch information
crisbeto authored and jelbourn committed Jul 14, 2017
1 parent 65d5efa commit a394418
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 6 deletions.
1 change: 1 addition & 0 deletions src/lib/card/card.html
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
<ng-content></ng-content>
<ng-content select="md-card-footer, mat-card-footer"></ng-content>
19 changes: 13 additions & 6 deletions src/lib/card/card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -62,11 +62,12 @@ $mat-card-header-size: 40px !default;
}

.mat-card-footer {
position: absolute;
width: 100%;
min-height: 5px;
bottom: 0;
left: 0;
// The negative margins pulls out the element, countering the padding
// to get the footer to be flush against the side of the card.
$margin: -$mat-card-default-padding;

display: block;
margin: 0 $margin $margin $margin;
}

.mat-card-actions {
Expand Down Expand Up @@ -154,6 +155,11 @@ $mat-card-header-size: 40px !default;
margin: -8px 0 0 0;
}

.mat-card-footer {
margin-left: -16px;
margin-right: -16px;
}

}

// FIRST/LAST CHILD ADJUSTMENTS
Expand All @@ -166,7 +172,8 @@ $mat-card-header-size: 40px !default;

// last els in mat-card-content and mat-card can't have their default margin-bottoms (e.g. <p> tags)
// or they'll incorrectly add to card's bottom padding
.mat-card > :last-child, .mat-card-content > :last-child {
.mat-card > :last-child:not(.mat-card-footer),
.mat-card-content > :last-child:not(.mat-card-footer) {
margin-bottom: 0;
}

Expand Down

0 comments on commit a394418

Please sign in to comment.