1
Je suis nouveau à Angular, et j'essaie de personnaliser la barre de défilement sur une liste déroulante PrimeNG, sans succès. Est-ce que quelqu'un sait comment faire ça?Comment personnaliser la barre de défilement dropdown dans 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 pour le panneau déroulant contenant scrollbar:
.ui-autocomplete .ui-autocomplete-panel {
position: absolute;
overflow: auto;
width: 290% !important;
}
J'ai essayé d'ajouter le CSS suivant à la composante:
::-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);
}
Mais il n'a pas d'effet dans la barre de défilement déroulante. Des idées? Toute aide sera très appréciée.
Lorsque vous placez votre CSS a un impact sur le moment où votre CSS est chargé. D'après mon expérience, vous devez charger des styles CSS qui changent de style pour les composants PrimeNG avant le chargement de PrimeNG. Sinon, l'espace de noms des composants angulaires prend le relais et vous ne pouvez pas modifier les styles à l'extérieur du composant. – axlj
C'était tout! Quand j'ai chargé le truc de webkit dans mon globalstyles.css, il a changé la barre de défilement déroulante. Je vous remercie! Si vous postez cela comme une réponse, je vais le vérifier. –