Open soorireddy opened 4 years ago
I believe that the current form field is set up to have a consistent baseline relative to other form fields, but not necessarily buttons and other Material components. Hopefully this will be better with the MDC-based versions.
When testing with the MDC based form field and button components, the heights are still different
Any updates on this?
How can this not be a thing?
Still nothing? So button is not considered as form field?
You can refer to this link: https://stackoverflow.com/questions/73835990/angular-material-vertically-center-button-next-to-matinput
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:
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