mat-autocomplete Angular-7 中的 CSS 问题

Posted 2023-03-06

【中文标题】mat-autocomplete Angular-7 中的 CSS 问题

【英文标题】：CSS issue in mat-autocomplete Angular-7

【发布时间】：2020-11-07 01:23:38

【问题描述】：

我正在使用 mat-autocomplete，因为当我选择下拉菜单并滚动主栏时，该下拉框不会随自动完成输入字段一起移动。 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>

【问题讨论】：

你是否对这个元素应用了任何自定义 css？

@MinalShah 未添加自定义 CSS

你能告诉我点击自动完成下拉框时如何禁用侧边栏滚动

【参考方案1】：

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

因此，您可以在此处做的一件事是，在选择下拉列表中的选项之一之后。您可以关闭 Dropbox，然后滚动主栏。

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

【讨论】：

你能举个例子吗