CODEWITHSUNDEEP
htmlcssangularprimeng
Pismotality
Pismotality

Reputation: 2289

How to customize dropdown scrollbar in PrimeNG

I am new to Angular, and am trying to customize the scrollbar on a PrimeNG dropdown, without success. Does anyone know how to do this?

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 for dropdown panel containing scrollbar:

.ui-autocomplete .ui-autocomplete-panel {
  position: absolute;
  overflow: auto;
  width: 290% !important;
}

I have tried adding the following CSS to the component:

::-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); 
}

But it has no effect on the dropdown scrollbar. Any ideas? Any help will be much appreciated.

Upvotes: 1

Views: 6551

Answers (1)

AJ X.
AJ X.

Reputation: 2770

You need to load the CSS styles for the PrimeNG Components you want to modify before PrimeNG is loaded.

This occurs because once PrimeNG has loaded, the styles are encapsulated inside the Angular component namespaces.

Upvotes: 3

Related Questions