我想在mat-autocomplete元素上添加完美滚动条。是否可以在angular material元素上添加ngx完美滚动条?
我是这样添加的,但出于某些原因,在Chrome中可以工作,但在Firefox中不行。如果我使用Firefox检查元素并展开覆盖层div,那么滚动条也可以工作,但只有在我展开该节点后才能正常工作。
如果您找到解决方案,请告诉我。
<mat-form-field>
<mat-chip-list #chipList>
<mat-chip *ngFor="let item of itemsSelected"
[selectable]="true"
[removable]="true"
(removed)="remove(item)">
{{item}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input placeholder="{{placeholder | translate}}"
#itemInput
[formControl]="itemCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="chipList"
[matChipInputAddOnBlur]="true">
</mat-chip-list>
<mat-autocomplete #auto="matAutocomplete"
(optionSelected)="selected($event)"
(opened)="matAutocompleteOpened()"
class="overflow-hidden">
<perfect-scrollbar>
<mat-option #matOption *ngFor="let item of filteredItems | async" [value]="item">
{{item}}
</mat-option>
</perfect-scrollbar>
</mat-autocomplete>
</mat-form-field>
同时需要考虑CSS样式
.mat-autocomplete-panel.overflow-hidden {
overflow: hidden !important;
position: relative !important;
.ps__rail-y:hover {
background-color: transparent !important;
}
}
With
@Component({
------
encapsulation: ViewEncapsulation.None
})