本文介绍了如何将水平滚动添加到垫自动完成的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在运行有角度的应用程序,对此我具有自动完成功能,我想向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.
这篇关于如何将水平滚动添加到垫自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!