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

[soorireddy]

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):

[crisbeto]

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.

[amysorto]

When testing with the MDC based form field and button components, the heights are still different

[vytautas-pranskunas-]

Any updates on this?

[Snawe]

How can this not be a thing?

[adurmus]

Still nothing? So button is not considered as form field?

[thienngoc]

You can refer to this link: https://stackoverflow.com/questions/73835990/angular-material-vertically-center-button-next-to-matinput