自动完成 - PrimeNG

Question

当primeNg AutoComplete组件超过一定宽度时，如何添加水平滚动？试过

overflow: auto; 

但它只增加了垂直滚动。

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

}

Answer 1

您可以使用 panelStyleClass 为面板添加一个类，并使用 ::ng-deep 为其设置样式

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

在CSS文件中

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