AutoComplete - PrimeNG

Question

How to add horizontal scroll to primeNg AutoComplete component when it exceeds certain width? Tried

overflow: auto; 

but it only adds vertical scrolling.

.p-autocomplete-panel {
   max-width: 15vw;
   overflow: auto;
   white-space: nowrap;

}

Answer 1

You can use panelStyleClass to add a class for the panel and using ::ng-deep to style this

<p-autoComplete [panelStyleClass]="'custom-panel-class'"></p-autoComplete>

In css file

::ng-deep .custom-panel-class {
   max-width: 15vw;
   min-width: auto !important; 
}

// horizontal scroll 
::ng-deep .custom-panel-class .p-autocomplete-items {
    width: fit-content;
}