У меня проблема с простой настройкой поля mat-form, в котором хранится мой ввод автозаполнения. По изображению вы можете видеть, находится ли она за пределами высоты панели инструментов, но я не нашел простого способа отрегулировать высоту всего ввода, чтобы он мог оставаться внутри области панели инструментов. Ширина работает нормально. Высота не.
ввод за пределы панели инструментов
Мой 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, я пытался отрегулировать высоту в CSS для компонента, используя div.mat-form-field и несколько других параметров, но, похоже, ничего не получалось. Глядя на документацию по Angular Material, я не нашел ничего, что показывало бы мне, как управлять этой простой настройкой стиля. Чего мне не хватает Это так просто, и я просто обдумываю это? Спасибо!