Long list of PrimeNG Checkboxes destroys the whole page layout

Issue

1. Open this StackBlitz
2. Scroll all the way down
3. Click on one of the last few checkboxes

(This occurs for me on Google Chrome Version 92.0.4515.131 (Official Build) (64-bit) but e.g. NOT on firefox – I did not check other browsers yet)

Result:

• Depending on the screen size, the whole page moves up by a few centimeters, the top no longer being accessible.
• On smaller screen sizes, the whole page is gone and I am left with empty white space.
• You can simulate the screen sizes by just changing the amount of items in the loop. 40 items on 1080p will move the full screen out of reach, 20 items on 1080p will have a little bit still shown. See screenshots below

I can not figure out what I am doing wrong here – this doesnt occur anymore when replacing the p-checkbox with an input type="checkbox". Setting all properties of the p-checkbox also doesnt change this behaviour.

Solution

Honestly I haven’t figured out the reason for it but you can add position: relative to your container class.

.content-container {
  position: relative;
}

Check the stackblitz

I added it to the app.component.css file and placed this line
styleUrls: ['./app.component.css'] below the templateUrl in your app.component.ts file.

Answered By – Parco

Answer Checked By – Willingham (AngularFixing Volunteer)