CODEWITHSUNDEEP
angularangular-material
Spialdor
Spialdor

Reputation: 1655

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

Upvotes: 5

Views: 6475

Answers (3)

GuyT
GuyT

Reputation: 4426

I set the button height with a css variable:

button {
  height: var(--mat-form-field-container-height);
}

that way, even when I update the variables the height will be correct.

Upvotes: 0

fredhair
fredhair

Reputation: 39

This is a very annoying issue that is still around at time of writing somehow. I have come across a quick fix that I use with flex given a situation like below:

<form class="flex flex-wrap">
  <mat-form-field>
    <mat-label>Search</mat-label>
    <input type="search" matInput>
  </mat-form-field>

  <div class="align-button-with-input">
    <button mat-flat-button type="submit">
      Submit
    </button>
  </div>
</form>

I use the following CSS:

.flex > .align-button-with-input {
  padding-bottom: 1.34375em;
}

.align-button-with-input > .mat-mdc-button-base {
  height: max(36px, 100%);
}

Or SCSS:

.flex { 
  > .align-button-with-input {
    padding-bottom: 1.34375em;

    > .mat-mdc-button-base {
      height: max(36px, 100%);
    }
  }
}

This has the effect of making the button aligned when on the same row as an input. If the button wraps around to the next row it resumes it's normal height (by default seems to be set as 36px). Not the most elegant solution but it's probably the best I've found so far.

Upvotes: 0

Dario Piotrowicz
Dario Piotrowicz

Reputation: 1122

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

Upvotes: 2

Related Questions