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 然后更改影响 class 的 css 属性的那个。很明显，它不应该像您的屏幕截图所示那样。

Angular 12- mat-form-field 超出了搜索栏

Angular 12- The mat-form-field goes out of the search-bar

html

css

angular

angular-material

mat-form-field