PrimeNG dropdown hidden by dialog

It is necessary to add an attribute appendTo.

e.g.

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

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>

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.