angular / angular/components

Form field and button in the same row but inconsistent height across variants of form field

Aperta
#20,413 6 commenti 1 reazione 0 assegnatari Vedi su GitHub
area: material/button area: material/form-field P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/fork/components-issue

would like to implement row with form fields and button with same height.
![image](https://user-images.githubusercontent.com/6324664/91208736-4759d880-e728-11ea-88d1-1cde6e0b9155.png)

Steps to reproduce:
1. https://angular-ivy-qdy6pn.stackblitz.io
2. Pure angular stack ( no custom styles) angular , material , flex


#### Expected Behavior
What behavior were you expecting to see?
it requires to write lot of custom styles for each variant and button. ( not maintainable)
one custom style should work across all variants of form fields and should handle height of buttons and fom-field.

#### Actual Behavior

What behavior did you actually see?
![image](https://user-images.githubusercontent.com/6324664/91209572-918f8980-e729-11ea-95e7-0eb9c9b30c28.png)

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding-bottom: 1.25em;
}

.mat-form-field-appearance-standard .mat-form-field-flex {
padding-top: .75em;
}

.mat-form-field-appearance-fill .mat-form-field-flex {
border-radius: 4px 4px 0 0;
padding: .75em .75em 0 .75em;
}

.mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.75em 0 0.75em 0 !important;
}

.mat-form-field-appearance-legacy .mat-form-field-infix {
padding-top: 0.75em !important;
}

.mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding-bottom: 1.75em;
}

#### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con le riproduzioni StackBlitz collegate e confronta le varianti dei campi modulo legacy, standard, fill e outline con un pulsante nella stessa riga. Esamina i selettori .mat-form-field-appearance-* elencati e determina se uno stile di componente condiviso può allinearne le altezze senza regole personalizzate per variante. Il lavoro è completato quando le varianti e il pulsante hanno un’altezza della riga coerente usando un unico stile manutenibile.

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

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.