小编Gli*_*pse的帖子

我在简单调整包含我的自动完成输入的mat-form-field时遇到了一个问题。从图像中可以看到它是否超出了垫子工具栏的高度，但是我还没有找到一种简单的方法来调整整个输入的高度，以便它可以停留在工具栏区域内。宽度工作正常。身高没有。

工具栏外部输入

我的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 dev工具时，我尝试使用div.mat-form-field和其他几个选项来调整CSS在组件中的高度，但是似乎没有任何效果。在查看Angular Material的文档时，我没有发现任何东西可以向我展示如何控制这种简单的样式调整。我想念什么。它是如此简单，我只是想得太多吗？谢谢！