如何将水平滚动添加到垫子自动完成

Question

我正在运行角度应用程序，我对此进行了自动完成，我想将水平滚动添加到垫子选项，我尝试应用css样式

.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>

两次尝试都失败了！！

Answer 1

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

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

custom-mat-option是我添加到<mat-option>元素中的类，以增加 css 规范性。

斯塔克闪电战

Answer 2

HTML

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

TS 文件

import {ChangeDetectionStrategy, Component} from '@angular/core';
/** @title Basic virtual scroll */
@Component({
selector: 'cdk-virtual-scroll-overview-example',
styleUrls: ['cdk-virtual-scroll-overview-example.css'],
templateUrl: 'cdk-virtual-scroll-overview-example.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

.CSS

.example-viewport {
height: 200px;
width: 200px;
border: 1px solid black;
}
.example-item {
height: 50px;
}

并点击此链接 滚动