mat-autocomplete Angular-7中的CSS问题

Question

我使用mat-autocomplete，因为当我选择下拉列表并滚动主栏时，dropbox不会随自动完成输入栏一起移动。enter image description here

代码：

​

<td width = 24% *ngIf="!stock.value.status_item">
    <input style="width: 167px;" type="text" placeholder="Select Item"   #editInput  tabindex="1" class="form-control"
      matInput [matAutocomplete]="itemsAuto" [(ngModel)]="stock?.value.commodity_name" [ngModelOptions]="{standalone:true}"  [disabled]=" stock.value.confirm_status" (input)="onSearch(stock?.value.commodity_name)" >
    <mat-autocomplete  #itemsAuto="matAutocomplete"  (opened)="autocompleteScroll()">
      <mat-option *ngFor="let item of ingredients" [value]="item.name"  [disabled]="!isItemAvailable(item)" (click)="addStockManully(item,i)">
          {{item?.name}}
            <span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvO" *ngIf="!isItemAvailable(item)">
              </span>
              <span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvOs" *ngIf="isItemAvailable(item)">
                </span>
      </mat-option>
    </mat-autocomplete>
  </td>

​

Answer 1

这个行为没有错，一旦dropbox被渲染为mat-select of mat-autocomplete，一旦它被渲染了，它就不会移动它的位置。

因此，您可以在这里做的一件事是，在下拉列表中选择其中一个选项后。您可以关闭dropbox，然后滚动主栏。

或者你可以在输入的模糊属性上关闭下拉框。因此，当您执行其他操作时，它会立即关闭下拉列表中显示的列表。