Search code examples
angularangular-material

Angular material how to make button same height as input

I have this little form containing two fields (in outline appearance) and a button.

 <form [formGroup]="filterForm">
      <section>
        <ng-container>
          <mat-form-field appearance="outline" class="mr-1">
            <mat-label>First name</mat-label>
            <input matInput placeholder="First name" formControlName="firstName" autocomplete="off"/>
          </mat-form-field>
        </ng-container>
        <ng-container>
          <mat-form-field appearance="outline">
            <mat-label>Last name</mat-label>
            <input matInput placeholder="Last name" formControlName="lastName" autocomplete="off"/>
          </mat-form-field>
        </ng-container>

        <button mat-flat-button (click)="filter()" class="bg-rose-500 text-white outline-none transition duration-150 ease-in-out transform hover:scale-105">Filter</button>
      </section>
    </form>

I just want to make my button the same height as the fields but as angular material add some padding and margin I can't set the good height (and even if I set manually the same height in px I have a small difference at the top of the button).

Here is a screenshot of my current input & buttons:

enter image description here

As you can see the mat-form-field is way bigger than the "real" field enter image description here

Here is a small stackblitz: https://stackblitz.com/edit/angular-material-10-date-range-ptfbwi?file=src/app/app.component.html

Solution

  • Without changing your html, I added the following to your css file (naturally you should add appropriate selector and not use the elements):

    section {
  display: flex;
  align-items: flex-start;
}

button {
  margin-top: 0.3em;
  padding: 1.55em 0;
  line-height: 1.125;
}

    It does not feel too good but it does feel like angular material is forcing our hands. Anyways I believe the look is like the one you wanted, I am using ems as that also seems the unit used by the form fields, so the button should behave pretty consistently in regards to the fields.

    Here's the thing in stackblitz: https://stackblitz.com/edit/angular-material-10-date-range-jnkwv2?file=src/app/app.component.css