一长串 PrimeNG 复选框破坏了整个页面布局

Question

1. 打开这个StackBlitz
2. 一直向下滚动
3. 单击最后几个复选框之一

（我在 Google Chrome 版本 92.0.4515.131（官方构建）（64 位）上发生这种情况，但例如不在 firefox 上 - 我还没有检查其他浏览器）

结果：

• 根据屏幕尺寸，整个页面向上移动几厘米，顶部不再可访问。
• 在较小的屏幕尺寸上，整个页面都消失了，我只剩下空白 space。
• 您只需更改循环中的项目数量即可模拟屏幕尺寸。 1080p 上的 40 个项目将无法全屏显示，1080p 上的 20 个项目仍会显示一点点。请参阅下面的屏幕截图

我不知道我在这里做错了什么 - 当用输入类型 =“复选框”替换 p-checkbox 时，这种情况不再发生。设置 p-checkbox 的所有属性也不会改变这种行为。

Answer 1

老实说，我还没有弄清楚它的原因，但你可以将 position: relative 添加到你的容器 class。

.content-container {
  position: relative;
}

Check the stackblitz

我将它添加到 app.component.css 文件并放置了这一行 styleUrls: ['./app.component.css'] 在 app.component.ts 文件中的 templateUrl 下方。