调整 mat-form-field Angular Material 的高度

Question

我在调整一个包含自动完成输入的 mat-form-field 时遇到了问题。从图片中可以看到，如果它超出了 mat-toolbar 的高度，但我还没有找到一种简单的方法来调整整个输入框的高度，使其保持在工具栏区域内。宽度可以正常工作，但高度不行。

工具栏外的输入框

我的HTML代码如下：

 <mat-toolbar  >
      <span style="width:200px">Test</span>
         <label>{{prodPointId}}</label>
        <form class="example-form"  >
            <mat-form-field  appearance="outline"  margin=" 10px" class="example-full-width searchField" >
                <mat-label>Search...</mat-label>

              <input type="text"   matInput [formControl]="myControl" [matAutocomplete]="auto" [(ngModel)]="value" >
              <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
                  <mat-icon>close</mat-icon>
                </button>
              <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
                <mat-option  
                    *ngFor="let option of filteredOptions | async" 
                    [value]="option.prodPointName" 
                    (click)="pointSelected(option.prodPointId)" 
                    [routerLink]="['/coredata', option.prodPointId]" >
                    <mat-icon>home</mat-icon>
                    {{option.prodPointCode}} : {{option.prodPointName}} 
                </mat-option>
              </mat-autocomplete>              
            </mat-form-field>
          </form>                  
  </mat-toolbar>

当我打开Chrome开发工具时，我尝试使用div.mat-form-field和其他几个选项在CSS中调整组件的高度，但似乎都没有起作用。查看Angular Material文档，我没有找到任何可以控制这个简单样式调整的内容。我错过了什么？是不是太简单了，我想太多了？谢谢！

- GlitchEclipse

---

一个 StackBlitz 的演示可能会有所帮助。 - KiraAG

您可以调整.mat-form-field-flex的高度来控制“框”的大小，但是您会注意到字段内部的部分不对齐，因为字体大小太大了。您也可以更改它，但是对齐不理想，而且字体可能比您想要的小。它并不是设计成可以从Material Design标准中更改的（在我看来，他们在这方面做得很差 - 他们试图使其“灵活”，但实际上却使其难以控制），因此如果有可能，最终需要进行极端的黑客攻击（可能容易出现不一致）。 - G. Tranter

Answer 1

需要覆盖CSS。

   <div class="mat-form-field-infix">
    <input class="mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored" ma

tinput="" placeholder="Enter First name" 
ng-reflect-placeholder="Enter First name" id="mat-input-0" aria-describedby="mat-hint-0" aria-invalid="false" aria-required="false">
<span class="mat-form-field-label-wrapper">
<label class="mat-form-field-label id="mat-form-field-label-1" for="mat-input-0" aria-owns="mat-input-0">
<mat-label _ngcontent-nbv-c4="" class="ng-star-inserted">First Name</mat-label>
</label>
</span>
</div>

style overwrite

.mat-form-field-appearance-outline .mat-form-field-infix {
   padding: 10px;
}
.mat-form-field-infix {
     padding:0;
     border-top: 0;
}

//change top and padding-top as per required

.mat-form-field-label-wrapper {
    top: -0.84375em;
    padding-top: 0.84375em;
}

- Rahul Kathar

Answer 2

我遇到了类似的问题，并在另一个帖子中找到了Neistow的答案：如何在mat-form-field中更改高度

您可以使用密度来减小mat-form-field的高度，同时保持所有正确的行为。将以下内容添加到您的styles.scss中：

.dense-2 {
  @include mat.all-component-densities(-2);
}

将这个类分配给你的 HTML 代码中的 mat-form-field：

<mat-form-field class="dense-2" ... >

关于密度的更多信息：https://material.angular.io/guide/theming#customizing-density

我知道这个问题已经有4年了，但是也许其他人，像我一样，会先遇到这个帖子而不是另一个。

- Timothée Emery