Issue
- Open this StackBlitz
- Scroll all the way down
- 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;
}
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)