mat-card-lg-image (mat-card-title-group) overlaps content in mat-card-content

[sumpton]

Bug, feature request, or proposal:

bug -- unless I am missing something

The large image mat-card-lg-image
in a mat-card-title-group overlaps the text below (mat-card-content).

What is the expected behavior?

The CSS should separate the image from the text in mat-card-content.

What is the current behavior?

The image overlaps the content in mat-card-content.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

https://angular-jqxhux.stackblitz.io

What is the use-case or motivation for changing an existing behavior?

:)

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Those in the current StackBlitz linked from
https://material.angular.io/components/card/examples

Is there anything else we should know?

[surfer19]

https://angular-jqxhux.stackblitz.io Link is not working :)

[josephperrott]

The mat-card-lg-image selector should only be used inside of a <mat-card-title-group> element. I am unsure if this is the cause of the issue, but I think that the documentation may need to be updated to make it a bit more clear.

[sumpton]

I guess I don't know how to work stackblitz. I don't know where I errored.

I went to
https://material.angular.io/components/card/examples
https://stackblitz.com/angular/ymlanaykbdm

There I copied lines 1 - 19 as a starting point.

• changed mat-card-header to mat-card-title-group
• deleted mat-card-avatar
• moved mat-card-image into mat-card-title-group
• changed that to mat-card-lg-image

end up with

<mat-card-title-group>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Shiba Inu</mat-card-title>
    <mat-card-subtitle>Dog Breed</mat-card-subtitle>
    <img mat-card-lg-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
</mat-card-title-group>

that the "lg" image is overlapping the first line of mat-card-content text.

I just did it again, and I have no confidence this works for others:

https://ymlanaykbdm.angular.stackblitz.io

[sumpton]

Please see if this stackblitz link works -- and demonstrates the CSS problem with the mat-card-lg-image overlapping mat-card-content.

https://stackblitz.com/edit/angular-jqxhux

[KevinKoelzer]

@sumpton The easiest thing to do might be to add a "style='margin-bottom: auto'" to the first image?