How do I in Angular material vertically center button next to matInput? As you can see on the picture below, the submit button is too low to be aligned with the "First Name" input field.
You can answer by forking my stackblitz here:
https://stackblitz.com/edit/angular-material-form-q8jcfe?file=app/my-form/my-form.component.css
This mat-form-field-wrapper padding-bottom is a pain in the ass. I know what it’s for, but still.
I am not allowed to use magic numbers to align this button.
This should be a pretty common task, I am wondering why material doesn’t provide a simply way for the button to always be aligned to the right, or why noone has asked this before on stackoverflow.
I want it to look nice always (e.g. when input changes height or button changes height), I don’t have any concrete design-idea but how it below is obviously looks off.
>Solution :
You can try and set parent div element for button that contains same css as the padding divelement that is sibling to ìnputelement. So my solution in this case would be something like:
<div class="mat-form-field-wrapper">
<button type="submit" mat-raised-button>Submit</button>
</div>
I’ve forked you repo and provided solution.
