angular / angular/components

[Card] Extra margins show when using ripple

Aperta
#10,898 14 commenti 8 reazioni 0 assegnatari Vedi su GitHub
area: material/card area: material/core P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dalla regola di stile vicino a src/lib/card/card.scss#L190 e usa la riproduzione collegata di StackBlitz per osservare l’espansione della scheda quando matRipple viene aggiunto a mat-card. La correzione è completata quando la scheda non acquisisce più un margine inferiore aggiuntivo né si espande al clic, mantenendo il comportamento di spaziatura esistente della scheda.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular
Ambito
frontend
Tipo di issue
Bug
Difficoltà
2/5
Tempo stimato
1-3 ore
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
38/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.