CODEWITHSUNDEEP
cssangulartypescriptaccordionprimeng
HenryDev
HenryDev

Reputation: 4953

How to add a scrollbar to accordion in PrimeNG?

I have an issue when expanding panels within my accordion in my Angular App. Basically if I expand a panel this is expanding and going over the footer of my application so I was thinking on adding a scrollbar to the accordion so it doesn't go over the footer anymore but I'm not sure where to start. Does anyone know how to add a scrollBar to accordion ? My guess is that I will need to put the accordion in a container and then add a scrollbar ? Here's my code and would like to add a scrollbar.

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>

Here are two images on what happens with my footer when a panel gets expanded:

1) BEFORE Expanding Panel

enter image description here

2) AFTER Expanding Panel

enter image description here

Upvotes: 3

Views: 5011

Answers (1)

Antikhippe
Antikhippe

Reputation: 6655

Just add these CSS properties to the p-accordion element :

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

Plunker

Upvotes: 1

Related Questions