CODEWITHSUNDEEP
cssangularprimengaccordion
user18974278
user18974278

Reputation: 143

How to move icon in primeng accordion from left to right?

I want to use an accordion from PrimeNg and I want collapse icon to be on the right side, not left. I tried to manipulate the iconPos attribute, but I cannot make it working for me. Can someone advise me here?

<p-accordion [multiple]="true" [iconPos]="endVal"> // endVal comes from ts and gets "end"
   <p-accordionTab header="Header 1">
       Content 1
   </p-accordionTab>
   <p-accordionTab header="Header 2">
       Content 2
   </p-accordionTab>
   <p-accordionTab header="Header 3">
       Content 3    
   </p-accordionTab>
 </p-accordion>

Upvotes: 1

Views: 2885

Answers (2)

Gokul Gokcool
Gokul Gokcool

Reputation: 1

<p-accordion [activeIndex]="0"  [multiple]="true">
    <p-accordionTab iconPos="end" header="Header I">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
    </p-accordionTab>
</p-accordion> 

<!-- add iconspos end and in scss include  this also 
    .p-accordion .p-accordion-header .p-accordion-header-link{
        background: $color-accordian-light-background;
        justify-content: space-between;
    }
it will work otherwise use ::ng-deep to override the default -->

Upvotes: 0

skink
skink

Reputation: 5756

The iconPos parameter was introduced in PrimeNG 15.1.0, please make sure you're running at least this version.

Additionally, since this is a problem in your StackBlitz, please ensure you bind parameter to the property, not string 'endVal':

<!-- in your StackBlitz -->
<p-accordionTab header="Header I" [selected]="true" iconPos="endVal">
<!-- should be -->
<p-accordionTab header="Header I" [selected]="true" [iconPos]="endVal">

Demo

Upvotes: 2

Related Questions