Geek Answers Handbook

How to fix corruption when expanding multiple panels in PrimeNG?

I work with multiple panels, and I added functionality to expand / collapse everyone. My problem is that when I expand them, I see an ugly text of corruption from all panels. Does anyone know how to fix this? Here is my working code: 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 wedding. His beloved son Michael has just come home from the war, but does not intend to become part of his father business. Through Michael 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>
+8
javascript css angular typescript primeng
source share
2 answers

Hey, not familiar with angular, nor the library that you use there. But you can avoid the overlapping part with some background and setting the position attribute.

 .ui-panel { position: relative; } .ui-panel .ui-panel-content.ui-widget-content { background: white; }
+5
source share

This is because you are trying to open all of them at once, and if you see carefully when you close them, they are all very close to each other, and then when you open them, they overlap , now I'm not sure what this is intended , but how they should open, this is only the beginning from their current positions and spread down, as if you collapse/extend only ONE of them.

0
source share

More articles:


All Articles