How to override inline style attributes of p-dropdown overlay div element

Question

I'm using primeng p-dropdown module. I've attached an <ng-template> to show my data in three columns, name, address, and email respectively. Without using appendTo attribute leads to a lot of text dropping to the next row and an ugly horizontal scrollbar. I used appendTo="body" and the text dropping issue is partially fixed, but I still see the address column text dropping to the next line. Upon further investigation, I found out that the p-dropdown outputs an overlay div element and it has an inline css style attribute of 'min-width' set to '473px' in my case. Here's the div element that gets outputted.

<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c5-5 extendWidth ui-dropdown-panel ui-widget ui-widget-content ui-corner-all ui-shadow ng-star-inserted" ng-reflect-klass="extendWidth" ng-reflect-ng-class="ui-dropdown-panel  ui-widget u" style="min-width: 473px; z-index: 1001; top: 210px; left: 419.875px; transform: translateY(0px); opacity: 1;">

I used chrome developer tools to change it to 635px and the overlay panel gets wide enough to show the address in one line, the horizontal scrollbar is not there anymore. Now, I'm trying to override this inline style from Angular and I'm unable to do so.

1. The library documentation provides panelStyle property to apply an inline style on the overlay div element, I've tried using it but since !important cannot be applied used here (because it sends these inline styles to ngStyle on the backend). So, it was useless in my case.
2. Then I tried using panelStyleClass attribute to set the class to extendWidth. The class name appears on the div but like this ng-reflect-klass="extendWidth". And the css styles present inside the class won't apply even with :host >>>

<p-dropdown
  name="customer"
  [style]="{ width: '100%' }"
  (onChange)="addCustomer()"
  [autoDisplayFirst]="false"
  [options]="customers"
  [(ngModel)]="selectedCustomer"
  optionLabel="fullName"
  [filter]="true"
  autofocus="true"
  [showClear]="true"
  required
  appendTo="body"
  panelStyleClass="extendWidth"
>
  <ng-template let-customer pTemplate="item">
    <div class="p-grid">
      <div class="p-col-3">{{ customer.value.fullName }}</div>
      <div class="p-col-6">{{ customer.value.streetAddress }}</div>
      <div class="p-col-3">{{ customer.value.email }}</div>
    </div>
  </ng-template>
</p-dropdown>

It should let me override the custom min-width attribute in some way.

Answer 1

You need to add the following class in your style.css to override the style for UI dropdown.

ui-dropdown-panel .ui-dropdown-items-wrapper {
    overflow: auto;
    min-width: 360px;
}

Here forked stackblitz solution

Answer 2

To override the min-width set by primeng on the element you can specify custom class for the overlay panel:

<p-dropdown panelStyleClass="minWidthOverride" ... >

and then style that in the main css file:

.minWidthOverride {
  min-width: 650px !important;
}

The reason why it must be in the main css file instead of component style is that you are attaching the overlay to the body of the page and not as a child of your component.

See updated stackblitz demo

PS: i would probably choose different layout so that address is not in col-xs-3 but in col-xs-12 so it has enough place. Address is simly too long to be shown reasonably within 3 cols of the dropdown panel.