htmlcssangularprimenginline-styles

how to give a max-height to the PrimeNg ListBox using listStyleClass attribue

The PrimeNG ListBox component mentions the attribute listStyleClass

I have managed to set the max-width using an inline style using the listStyle attribute

    <p-listbox id="myListbox" class="my-list" [options]="listItems()"
      [listStyle]="{ 'max-height': '300px' }">

but I would prefer not to have inline styles and use the listStyleClass to get the same result

    <p-listbox id="myListbox" class="my-list" [options]="listItems()"
      listStyleClass="customListStyleClass">

when I put in my component css

.customListStyleClass {
   max-height : 300px;
}

nothing happens. How do I achieve the same result without inline styles

This is the docs https://primeng.org/listbox and demo can be created by opening the examples in stackblitz

Solution

  • it worked for me when I did like

        <p-listbox id="myListbox" class="my-list" [options]="listItems()"
      listStyleClass="customListStyleClass">

    and in scss file

    :host ::ng-deep .customListStyleClass {
   max-height : 300px;
}