Menú desplegable de PrimeNG oculto por diálogo

Solución:

Es necesario agregar un atributo appendTo.

p.ej

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

Esto es de la documentación oficial de NG Prime. Cuando el diálogo incluye otros componentes con superposiciones, como el menú desplegable, la parte superpuesta no puede exceder los límites del diálogo debido al desbordamiento. Para resolver esto, puede agregar la superposición al cuerpo o permitir el desbordamiento en el diálogo.

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

O

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

Hay dos formas principales de resolver este problema:

1. Agregar un appendTo sección a cada componente que necesita poder desbordar el cuadro de diálogo.

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

   Problemas con este enfoque: (a) Necesita agregar un appendTo sección a cada elemento de su cuadro de diálogo que puede desbordarse, y (b) si la página detrás del cuadro de diálogo es lo suficientemente grande como para que pueda desplazarse, el menú desplegable desbordado desplácese con la página, no con el diálogo.

2. Enfoque preferido: Permitir el p-dialog sobrepasar.

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

   Si está utilizando un p-footer, es posible que también deba incluir lo siguiente en su archivo css para asegurarse de que el pie de página se muestre correctamente (esto es esencialmente agregar la clase ui-g-12 al div que contiene el pie de página):

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

Nota: Ambas soluciones se enumeran en PrimeNG Doc para p-dialog, aunque los documentos no explican cómo hacer que un pie de página se muestre correctamente.

---

---

Utiliza Nuestro Buscador