如何在PrimeNG中自定義下拉滾動條

我是Angular的新手，我試圖在PrimeNG下拉菜單上自定義滾動條，但沒有成功。有誰知道如何做到這一點？如何在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); 
}

但它沒有任何效果在下拉滾動條上。有任何想法嗎？任何幫助都感激不盡。

來源

2017-10-05 Dwight Mendoza

放置CSS的位置會影響CSS的加載時間。根據我的經驗，您需要在PrimeNG加載之前加載用於PrimeNG組件的樣式更改CSS。否則，Angular組件的名稱空間會接管並且不能從組件外部更改樣式。 – axlj

就是這樣！當我在我的globalstyles.css中加載webkit的東西時，它改變了下拉滾動條。謝謝！如果您將此作爲答案發布，我會對其進行檢查。 –

您需要在加載PrimeNG之前加載要修改的PrimeNG組件的CSS樣式。

發生這種情況是因爲PrimeNG加載後，樣式被封裝在Angular組件名稱空間中。

來源

2017-10-05 19:37:56 axlj

你懂了！祝你好運！ – axlj

如何在PrimeNG中自定義下拉滾動條

回答

相關問題