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

그게 다야! globalityles.css에 웹킷을로드했을 때 드롭 다운 스크롤바가 변경되었습니다. 고맙습니다! 이 질문을 답으로 게시하면 확인해 보겠습니다. –

PrimeNG가로드되기 전에 수정하려는 PrimeNG 구성 요소의 CSS 스타일을로드해야합니다.

이 문제는 PrimeNG가로드되고 나면 스타일이 Angular 구성 요소 네임 스페이스 내에 캡슐화되기 때문에 발생합니다.

출처

2017-10-05 19:37:56 axlj

당신은 그것을 얻었다! 행운을 빕니다! – axlj

PrimeNG에서 드롭 다운 스크롤 바를 사용자 정의하는 방법

답변

관련 문제