Angular 12- mat-form-field离开搜索栏

Question

我正在制作一个搜索栏，并在mat-form-field中添加了一个mat-autocomplete。输入字段超出了搜索栏的范围，如下所示

​

这是代码HTML：

<div class="search-bar">
    <mat-icon>search</mat-icon>
    <form class="example-form">
        <mat-form-field class="example-full-width" appearance="fill">
          <input type="text"
                placeholder="Search for a food item ..."
                matInput
                [formControl]="myControl"
                [matAutocomplete]="auto">
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">
              {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </form>
</div>

CSS：

.search-bar{
    background-color: #ffffff;
    height: 40px;
    border-radius: 20px;
    display: flex;
    padding: 10px;
    min-width: fit-content;
    width: max-content;
}
.example-form{
    background: #ffffff;
    outline: none;
    border-style: none;
    width: 30rem;
    font-size: 1.2rem;
    width: max-content;
}

input{
    height: 2rem;
}

如何更改mat-form-field的高度？提前感谢

Answer 1

如果您想知道如何更改mat-form-field的高度(如果您不知道，请不要冒犯)。您可以尝试执行以下操作。

mat-form-field {
 height: 20px;
}

我建议您使用浏览器中的开发人员工具来查找元素。下推mat-autocomplete，然后更改受影响类的css属性。很明显，它不应该像你的截图中所显示的那样。