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