Accordion Header Style

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 {
  displayflex;
  flex1 1 100%;
  justify-contentspace-between !important;
  width100%;
  flex-directionrow;
}


Best Regards

3 Replies 1 reply marked as answer

SK Satheesh Kumar Balasubramanian Syncfusion Team May 17, 2021 12:12 PM UTC

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. 


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 
                  class="e-avatar e-avatar-small" 
                /> 
              </div> 
            </div> 
          </ng-template> 
  
app.component.css:  
.e-avatar-small { 
  positionabsolute; 
  displaytable; 
  right40px; 
  top0px; 
} 
  
Kindly try the above sample and let us know if this meets your requirement. 
  
Regards, 
Satheesh Kumar B 



Marked as answer

AM AYMEN Matador May 17, 2021 10:55 PM UTC

Hi, 

Thanks for the help, this solution works fine for me

Regards


NR Nevitha Ravi Syncfusion Team May 18, 2021 05:09 AM UTC

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  


Loader.
Up arrow icon