javascript - ¿Cómo solucionar la corrupción al expandir múltiples paneles en PrimeNG?

Estoy trabajando con múltiples paneles y agregué funcionalidad para expandir/colapsar todos. Mi problema es que cuando los expando veo un texto de corrupción feo de todos los paneles. ¿Alguien sabe cómo solucionar eso? Aquí está mi código funcionando: PLUNKER

 <p-panel header="Panel 1" [toggleable]="true" [collapsed]="collapsed" [style]="{'margin-bottom':'20px'}">

 The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.

</p-panel> 

Respuesta #1

Oye, no estoy tan familiarizado con Angular ni con la biblioteca que estás usando allí. Pero puedes evitar la parte superpuesta con algo de fondo y configurando un atributo de posición.

.ui-panel {
  position: relative;
}
.ui-panel .ui-panel-content.ui-widget-content { 
     background: white;
}

Respuesta #2

Eso es porque estás intentando abrirlos todos a la vez, y si miras de cerca, cuando los cierras, están todos muy cerca unos de otros, y luego cuando los abres, se superponen; ahora, no estoy seguro de si eso es intencional, pero la forma en que deberían abrirse es simplemente empezar desde sus posiciones actuales y extenderse hacia abajo, tal como cuando colapsas/extiendes solo UNO de ellos.