我正在运行角度应用程序,我具有自动完成字段,我想调整此位置。我在方法下引用了官方文档enter link description here, updatePosition- 更新自动完成建议面板的位置,以确保其适合视口内的所有选项。
我不确定如何使用
这是我的template.html
<mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300 >
<input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<p id="spandiv">{{customerName}}</p>
<mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}}) <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
如下图所示,我希望mat-option向左稍微移动
如该图片所示,突出显示的类总是向左应用样式:779px,但我想保持atv 775px
答案 0 :(得分:0)
我能够使用
设置样式
.mat-autocomplete-panel {
position:relative;
right:3px;
}