Accordion Header Style

[AYMEN Matador]

Greetings,

Can you help me push the icon in the accordion header to the right

Actually, I tried (as shown in the code below) wih flex display, but I still can't get it to fit the whole space.

ejs-accordion expandMode='Single' class="container">

    <e-accordionitems>

      <e-accordionitem expanded='false' *ngFor="let user of players">

        <ng-template class="flex-row" #header>

            <div class="header flex-row">

                {{user?.player?.firstName | uppercase }} {{user?.player?.lastName | uppercase}}

              <div>

                <img src="../../../../assets/imgs/img_avatar.png" alt="Avatar" class="avatar">

              </div>

              </div>

        </ng-template>

        <ng-template #content>

          

          <div>

            content #

        </ng-template>

      </e-accordionitem>

    </e-accordionitems>

</ejs-accordion>

CSS:

.flex-row {

  display: flex;

  flex: 1 1 100%;

  justify-content: space-between !important;

  width: 100%;

  flex-direction: row;

}

Best Regards

[Satheesh Kumar Balasubramanian]

Hi Aymen, 

  

Thanks for using Syncfusion Products. 

  

We have validated your reported query "Accordion Header style" at our end and suspect that you need to push the image in the accordion header to the right. We have achieved your requirement using the below customized style. We have prepared a sample for your reference which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-header-image-customization?file=app.component.css 

app.component.html:  

          <ng-template class="flex-row" #header> 

            <div> 

              <div class="e-acrdn-header-content"> 

                Athletics 

              </div> 

              <div class="e-acrdn-header-image"> 

                <img 

                  src="https://ej2.syncfusion.com/angular/documentation/samples/avatar/getting-started-cs1/pic01.png" 

                  class="e-avatar e-avatar-small" 

                /> 

              </div> 

            </div> 

          </ng-template> 

  

app.component.css:  

.e-avatar-small { 

  position: absolute; 

  display: table; 

  right: 40px; 

  top: 0px; 

} 

  

Kindly try the above sample and let us know if this meets your requirement. 

  

Regards, 

Satheesh Kumar B 

[AYMEN Matador]

Hi, 

Thanks for the help, this solution works fine for me

Regards

[Nevitha Ravi]

Hi Aymen, 

You are most welcome..! we are glad that our provided solution helped you, please get back to us if you need any further assistance. 

Regards, 

Nevitha