Search code examples
htmlcssangularprimengprimeng-checkbox

Long list of PrimeNG Checkboxes destroys the whole page layout

  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.

Normal View before scrolling/checking View after selecting a checkbox, already 50% of screen empty View after selecting a checkbox but with 30 items - whole screen gone

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.