angular / angular/components

[Card] Extra margins show when using ripple

Offen
#10,898 14 Kommentare 8 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/card area: material/core P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

When `matRipple` is added to a ``, the card expands on click.

Reproduction: https://stackblitz.com/edit/angular-1mherw?file=app/card-overview-example.html

This is due to the styling rule that says every element in the card except for the last should have bottom margin. When the ripple is added, the last element is no longer last and so it gains the margin bottom.

https://github.com/angular/material2/blob/master/src/lib/card/card.scss#L190

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie mit der Styling-Regel nahe src/lib/card/card.scss#L190 und verwenden Sie die verknüpfte StackBlitz-Reproduktion, um die Kartenerweiterung zu beobachten, wenn matRipple zu mat-card hinzugefügt wird. Die Behebung ist abgeschlossen, wenn die Karte beim Klicken keinen zusätzlichen unteren Rand mehr erhält oder sich ausdehnt, während das bestehende Kartenabstandsverhalten erhalten bleibt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.