角材料如何使按钮与输入高度相同 [英] 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>

我只是想让我的按钮与字段的高度相同，但由于角材料添加了一些填充和边距，我无法设置好的高度(即使我手动设置相同的 px 高度，我也有很小的差异在按钮顶部).

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:

如您所见，mat-form-field 比真实"的要大得多.场地

As you can see the mat-form-field is way bigger than the "real" field

这是一个小的stackblitz:https://stackblitz.com/edit/angular-material-10-date-range-ptfbwi?file=src/app/app.component.html

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

推荐答案

在不改变你的 html 的情况下，我在你的 css 文件中添加了以下内容(自然你应该添加适当的选择器而不是使用元素):

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;
}

感觉不太好，但确实感觉有棱角的材料在强迫我们的手.无论如何，我相信外观就像您想要的那样，我正在使用 em s，因为这似乎也是表单字段使用的单位，因此按钮在字段方面的行为应该非常一致.

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.

这是 stackblitz 中的内容:https://stackblitz.com/edit/angular-material-10-date-range-jnkwv2?file=src/app/app.component.css

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

这篇关于角材料如何使按钮与输入高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！