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.

Embodiment

Try appendTo="body" on dialog or remove overflow from ui-dialog-content div. – Pyxie

Did you ever solve this - I am having this same problem too? The appendTo nor the overflow css addition seemed to help – Abbotson

@TheUnculledBadger I have added my code as an answer – Embodiment

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>

Stockinet

Problem with your solution, if the body is bigger than your screen and you can scroll, the dropdown panel move with it but not your dialog... – Constantine

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>

Busywork

i did it this way appendTo=".p-dialog-content" – Wasp

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.

Odey

The problem with [contentStyle]="{'overflow':'visible'}" is that if the dialog is resized smaller than the height of the drop down, the drop down will still show on the screen as opposed to hiding as the dialog shrinks – Abdullah

If I wrap a dropdown with p-dialog, the dropdown disappears. – Latif

Answer 4

Angular/PrimeNG 12+

This works for me:

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

Afteryears

Answer 5

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>

Embodiment

Hi there.. That has definitely improved matters, it no longer looks like its cut off now, however, did you put anything else in the style to increase the height of the p-dropdown container? – Abbotson

Answer 6

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}']

Garrido

Answer 7

Use attribute appendTo.

Use template variable in the modal dialog content part and use the template variable in the appendTo attribute.

Example: Template variable

<div mat-dialog-content #matdialogcontent>

Usage

 <p-dropdown [options]="optionsArray" [appendTo]="matdialogcontent"></p-dropdown>

Note: If you use [appendTo]="body" there is a possibility that the dropdown will float, as the user can scroll the page and open the dropdown from a modal.

Unceasing