Form field and button in the same row but inconsistent height across variants of form field
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
#### 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.

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?

.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):
Guía de contribución
Línea de trabajo
Comienza con las reproducciones de StackBlitz enlazadas y compara las variantes de campos de formulario legacy, standard, fill y outline con un botón en la misma fila. Revisa los selectores .mat-form-field-appearance-* indicados y determina si un estilo de componente compartido puede alinear sus alturas sin reglas personalizadas por variante. Se considera terminado cuando las variantes y el botón tienen una altura de fila coherente usando un único estilo mantenible.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100