title: How to override inline style attributes of p-dropdown overlay div element
body: <p>I'm using primeng p-dropdown module. I've attached an <code>&lt;ng-template&gt;</code> to show my data in three columns, name, address, and email respectively. Without using <code>appendTo</code> attribute leads to a lot of text dropping to the next row and an ugly horizontal scrollbar. I used <code>appendTo="body"</code> 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 <code>p-dropdown</code> outputs an overlay <code>div</code> element and it has an inline css style attribute of <code>'min-width'</code> set to <code>'473px'</code> in my case. 
  Here's the div element that gets outputted.</p>
  
  <pre><code>&lt;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;"&gt;
  </code></pre>
  
  <p>I used chrome developer tools to change it to <code>635px</code> 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.</p>
  
  <ol>
  <li>The library documentation provides <code>panelStyle</code> property to apply an inline style on the overlay div element, I've tried using it but since <code>!important</code> cannot be applied used here (because it sends these inline styles to <code>ngStyle</code> on the backend). So, it was useless in my case.</li>
  <li>Then I tried using <code>panelStyleClass</code> attribute to set the class to <code>extendWidth</code>. The class name appears on the div but like this <code>ng-reflect-klass="extendWidth"</code>. And the css styles present inside the class won't apply even with <code>:host &gt;&gt;&gt;</code> </li>
  </ol>
  
  <pre><code>&lt;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"
  &gt;
    &lt;ng-template let-customer pTemplate="item"&gt;
      &lt;div class="p-grid"&gt;
        &lt;div class="p-col-3"&gt;{{ customer.value.fullName }}&lt;/div&gt;
        &lt;div class="p-col-6"&gt;{{ customer.value.streetAddress }}&lt;/div&gt;
        &lt;div class="p-col-3"&gt;{{ customer.value.email }}&lt;/div&gt;
      &lt;/div&gt;
    &lt;/ng-template&gt;
  &lt;/p-dropdown&gt;
  </code></pre>
  
  <p>It should let me override the custom min-width attribute in some way.</p>