如何在 PrimeNG 中向手风琴添加滚动条？

Posted 2023-03-13

【中文标题】如何在 PrimeNG 中向手风琴添加滚动条？

【英文标题】：How to add a scrollbar to accordion in PrimeNG?

【发布时间】：2018-06-13 17:42:29

【问题描述】：

在我的 Angular 应用程序中展开手风琴内的面板时遇到问题。基本上，如果我扩展一个面板，这将扩展并越过我的应用程序的页脚，所以我正在考虑向手风琴添加一个滚动条，这样它就不会再越过页脚，但我没有确定从哪里开始。有谁知道如何将滚动条添加到手风琴？我的猜测是我需要将手风琴放在一个容器中，然后添加一个滚动条？ 这是我的代码，想添加一个滚动条。

PLUNKER

<p-accordion [activeIndex]="index">
  <p-accordionTab header="Header 1">
   Content 1
</p-accordionTab>
<p-accordionTab *ngIf="true" header="Header 2">
   Content 2
</p-accordionTab>
<p-accordionTab header="Header 3">
  Content 3
</p-accordionTab>

下面是两张图片，说明当面板展开时我的页脚会发生什么：

1) 展开面板之前

2) 展开面板后

【问题讨论】：

您的 plunker 没有页脚。你保存了吗？

是的，你是对的，这只是手风琴内多个面板的示例。你知道如何给手风琴添加滚动条吗？

不明白。你想让你的手风琴有一个固定的高度吗？

@Antikhippe 是的，是固定高度，因此在展开面板时它会与页脚重叠

【参考方案1】：

只需将这些 CSS 属性添加到 p-accordion 元素即可：

height: 275px;
display: block;
overflow: scroll;

Plunker

【讨论】：

好的，能否更新 Plunker 以添加页脚，以便我重现此问题？

应用程序很大，不确定是否可以在 plunker 示例中添加页脚

好的，但我不知道您是如何创建页脚的。我编辑了我的 Plunker 以添加页脚，您是否在其上重现了问题？