2

我正在运行角度应用程序,我有自动完成字段,我想调整它的位置。我参考了官方文档在方法下在此处输入链接描述,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>

如下图所示,我希望垫子选项向左移动一点

在此处输入图像描述

如图所示,突出显示的类总是将样式应用于 left:779px 但我想保持 atv 775px

在此处输入图像描述

4

1 回答 1

0

我可以使用


.mat-autocomplete-panel { 
  position:relative;
  right:3px;
}

于 2019-11-28T10:24:40.580 回答