2

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.

2 Answers2

1

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.

Ludevik
  • 6,954
  • 1
  • 41
  • 59
  • i have updated the answer, check whether it helps in your use case – Ludevik Feb 08 '19 at 09:48
  • you can try `[style]="{'width':'100%'}"` – Ludevik Feb 08 '19 at 15:33
  • what are you using for layout? bootstrap or some other grid? – Ludevik Feb 08 '19 at 21:30
  • I'm using primeflex. –  Feb 09 '19 at 18:31
  • check out my edited stackblitz, it looks fine to me. maybe you could create stackblitz with whole layout as it seems the problem is elsewhere. – Ludevik Feb 09 '19 at 19:46
  • Hi, thank you for your time. I've recreated the layout to match with the one I have in my project. Please check this link https://stackblitz.com/edit/angular-geh3wi My application main page is divided into two 6 columns. And the dropdown issue occurs in the first col-xs-6. Now if we could somehow override min-width property of the generated overlay, we'd easily solve the horizontal scroll bar and the text dropping issue. –  Feb 11 '19 at 11:53
  • did you save your stackblitz? i don't see any `col-xs-6` there. You probably need to fork it to be able to edit it. – Ludevik Feb 11 '19 at 20:09
  • final answer :D – Ludevik Feb 12 '19 at 21:01
  • Makes sense, and it's working perfectly. Thanks a lot. And yes, in my case, I will assign col-xs-6 to it for now. –  Feb 14 '19 at 09:39
0

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

TheParam
  • 10,113
  • 4
  • 40
  • 51
  • While it does work for the problematic dropdown overlay, I've noticed that it actually extends the overlay width for the dropdowns that don't need it. [link](https://ibb.co/LC64WbM) –  Feb 08 '19 at 13:59