如何在 PrimeNG 中自定义下拉滚动条
How to customize dropdown scrollbar in PrimeNG
我是 Angular 的新手,正在尝试自定义 PrimeNG 下拉菜单上的滚动条,但没有成功。有人知道怎么做吗?
HTML:
<p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh.head,i)" (onClear)="clearData($event,dh.head, i)" (onDropdownClick)="handleDropdown(event)" field="name" [suggestions]="filteredData" [(ngModel)]="dh.head" (completeMethod)="search($event,i)" [dropdown]="true">
<ng-template let-colval pTemplate="item">
<div innerHTML="{{colval.name | highlight:dh.head}}"></div>
</ng-template>
</p-autoComplete>
CSS 对于包含滚动条的下拉面板:
.ui-autocomplete .ui-autocomplete-panel {
position: absolute;
overflow: auto;
width: 290% !important;
}
我已尝试将以下 CSS 添加到组件中:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
但对下拉滚动条没有影响。有任何想法吗?任何帮助将不胜感激。
在加载 PrimeNG 之前,您需要为要修改的 PrimeNG 组件加载 CSS 样式。
发生这种情况是因为一旦加载 PrimeNG,样式就会封装在 Angular 组件命名空间中。
我是 Angular 的新手,正在尝试自定义 PrimeNG 下拉菜单上的滚动条,但没有成功。有人知道怎么做吗?
HTML:
<p-autoComplete placeholder="- Select -" (onSelect)="onSelect(dh.head,i)" (onClear)="clearData($event,dh.head, i)" (onDropdownClick)="handleDropdown(event)" field="name" [suggestions]="filteredData" [(ngModel)]="dh.head" (completeMethod)="search($event,i)" [dropdown]="true">
<ng-template let-colval pTemplate="item">
<div innerHTML="{{colval.name | highlight:dh.head}}"></div>
</ng-template>
</p-autoComplete>
CSS 对于包含滚动条的下拉面板:
.ui-autocomplete .ui-autocomplete-panel {
position: absolute;
overflow: auto;
width: 290% !important;
}
我已尝试将以下 CSS 添加到组件中:
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
但对下拉滚动条没有影响。有任何想法吗?任何帮助将不胜感激。
在加载 PrimeNG 之前,您需要为要修改的 PrimeNG 组件加载 CSS 样式。
发生这种情况是因为一旦加载 PrimeNG,样式就会封装在 Angular 组件命名空间中。