如何将水平滚动添加到垫自动完成 [英] How to add horizontal scroll to mat autocomplete

问题描述

我正在运行有角度的应用程序，对此我具有自动完成功能，我想向mat-option添加水平滚动，我尝试应用CSS样式

I am running angular app , I have auto complete on this, I want to add horizontal scroll to the mat-option, I tried applying css style

.cdk-overlay-pane {
  overflow-x: auto;
}

 then applying syle as told in this docuemnt [enter link description here][1] showPanel: boolean

  <mat-option class="CustomerDropDown" showPanel="true" ...

extended question

<mat-form-field >
  <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
  <mat-autocomplete panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn" style="width:750px;">
     <mat-option  *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID + '('+ customer.AccountName + ')'" (click)="onCustomerChange(customer)">
      {{customer.AccountID}} ({{customer.AccountName}})
     </mat-option>
  </mat-autocomplete>
</mat-form-field>

两次尝试都失败了！

推荐答案

尝试以下CSS.它对我有用.

Try the following CSS. It worked for me.

::ng-deep .custom-mat-option .mat-option-text {
  overflow: auto;
  text-overflow: unset;
  // color: green;
}

custom-mat-option是我添加到<mat-option>元素中以增加CSS特异性的类.

custom-mat-option is a class I have added to the <mat-option> element to increase the css specifity.

Stackblitz

这篇关于如何将水平滚动添加到垫自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！