So passen Sie die Dropdown-Bildlaufleiste in PrimeNG an

Ich bin neu in Angular und versuche, die Bildlaufleiste in einem PrimeNG-Dropdownmenü anzupassen, ohne Erfolg. Weiß jemand, wie man das macht?So passen Sie die Dropdown-Bildlaufleiste in PrimeNG an

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 für Drop-Down-Panel enthält Scrollbar:

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

habe ich versucht, die Komponente der folgenden CSS hinzufügen:

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

Aber es hat keinen Einfluss in der Dropdown-Bildlaufleiste. Irgendwelche Ideen? Jede Hilfe wird sehr geschätzt.

Quelle

2017-10-05 Dwight Mendoza

Wo Sie Ihr CSS platzieren, hat einen Einfluss darauf, wann Ihr CSS geladen wird. Aus meiner Erfahrung müssen Sie Style-Changing-CSS für PrimeNG-Komponenten laden, bevor PrimeNG geladen wird. Andernfalls übernimmt der Namespacing der Angular-Komponente und Sie können die Stile von außerhalb der Komponente nicht ändern. – axlj

Das war es! Als ich die webkit-Sachen in meine globalstyles.css geladen habe, hat sich die Dropdown-Scrollleiste geändert. Vielen Dank! Wenn du dies als Antwort postest, werde ich es überprüfen. –

Sie müssen die CSS-Stile für die PrimeNG-Komponenten laden, die Sie ändern möchten, bevor PrimeNG geladen wird.

Dies tritt auf, weil, sobald PrimeNG geladen wurde, die Stile in den Namespaces der Angular-Komponente gekapselt sind.

Quelle

2017-10-05 19:37:56 axlj

Du hast es! Viel Glück! – axlj

So passen Sie die Dropdown-Bildlaufleiste in PrimeNG an

Antwort

Verwandte Themen