PrimeNG dropdown hidden by dialog

Question

I have an Angular2 app using PrimeNG components.

I want a dropdown inside a dialog box. However, when i have implemented this, the dropdown is cut off by the limit of the dialog box as shown in the screenshot below. What i want is for it to display above the dialog and have all the options visible.

It is only a small dialog and i do not want to create a large one for this as there will be lots of empty unused space.

My html code for this is as below:

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" minHeight="200">
    <div class="row col-md-12" align="center">
        <button pButton (click)="viewRepack()" label="View Repack"></button>
    </div>
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>
    <button pButton label="Save" (click)="save()" style="float:right;margin-right:3px;margin-top:5px;"></button>
</p-dialog>

If anyone can offer any advice on this it would be greatly appreciated.

Answer 1

It is necessary to add an attribute appendTo.

e.g.

<p-dropdown appendTo="body" [options]="tables" [(ngModel)]="selectedTable" [style]="{width: '100%'}"></p-dropdown>

Answer 2

This is from Official NG Prime Documentation. When dialog includes other components with overlays such as dropdown, the overlay part cannot exceed dialog boundaries due to overflow. In order to solve this, you can either append the overlay to the body or allow overflow in dialog.

<p-dialog>
<p-dropdown appendTo="body"></p-dropdown>

OR

 <p-dialog [contentStyle]="{'overflow':'visible'}">
<p-dropdown></p-dropdown>

Answer 3

There are two primary ways to solve this problem:

1. Add an appendTo section to each component that needs to be able to overflow the dialog.

   <p-dialog>
       <p-dropdown appendTo="body"></p-dropdown>
   </p-dialog>
   

   Problems with this approach: (a) You need to add an appendTo section to each item in your dialog that may overflow, and (b) if the page behind the dialog is big enough that you can scroll, the overflowing dropdown will scroll with the page, not the dialog.

2. Preferred Approach: Allow the p-dialog to overflow.

   <p-dialog [contentStyle]="{'overflow':'visible'}">
      <p-dropdown></p-dropdown>
   </p-dialog>
   

   If you are using a p-footer, you may also need to include the following in your css file to make sure the footer displays correctly (this is essentially adding the class ui-g-12 to the div that contains the footer):

   p-dialog /deep/ .ui-dialog-footer {
      width: 100%;
      float: left;
      box-sizing: border-box;
      padding: .5em;
   }
   

Note: Both of these solutions are listed under the PrimeNG Doc for p-dialog, although the docs do not explain how to get a footer to display correctly.

Answer 4

Here is the code that worked for me:

<p-dialog header="Repack" [(visible)]="display" showEffect="fade" resizable="true">
    <div class="row col-md-12" align="center" style="overflow-y:visible">
        <button pButton (click)="ViewRepack()" label="View Repack"></button>
    </div>
    <div class="row col-md-12"><strong>Edit Table Assignment: </strong></div>
    <p-dropdown [options]="tables" [(ngModel)]="selectedTable" [style]="{width:'200px', position:'fixed'}"></p-dropdown>
    <button pButton label="Save" (click)="ChangeTable()" style="float:right;margin-right:3px;"></button>
</p-dialog>

Answer 5

add [autowidth]="false" to p-dropdown

eg

<p-dropdown [options]="colors" [(ngModel)]="selectedColor"
            [autoWidth]="false"></p-dropdown>

Edit : additionnaly you can tweak the width of the dropdown using the following style in your component

styles: [':host /deep/ .ui-dropdown-items-wrapper { min-width: 250px}']

Answer 6

Angular/PrimeNG 12+

This works for me:

  <p-dialog [contentStyle]="{'overflow':'visible'}"></p-dialog>