How can I stretch a button in an Accordion Header to 100%?

[Harald]

Hey

I am using the Accordion control for displaying my menu.

The last header in this control should be a button (for logout)

I don't get it working, that the button get's 100% of the header width.

Could you please help me to get this done...

What I tried so far, based on your shipped sample:

<SfSidebar @ref="sidebarObj" Width="280px">

    <ChildContent>

        <span class="e-avatar e-avatar-large e-avatar-circle image"></span>

        <div class="text" style="width: 100%;font-size: 30px;text-align: center;">John </div>

        <SfAccordion>

            <AccordionItems>

                <AccordionItem>

                    <HeaderTemplate>

                        <div class="container" style="width:100%">

                            <Syncfusion.Blazor.Buttons.SfButton @onclick="LogOut" Content="Logout" CssClass="e-btn-width" />

                        </div>

                        

                    </HeaderTemplate>

                </AccordionItem>

            </AccordionItems>

        </SfAccordion>

  </ChildContent>

</SfSidebar>

<style>

    .e-btn-width {

        border-radius: 0;

        width: 100%;

    }

</style>

THX a lot in advance

[Alagumeena Kalaiselvan]

Hi Harald, 

Thanks for contacting Syncfusion support. 

We have checked with your reported issue “How to stretch a button in an AccordionHeader to 100%” and you can simply achieve this case by overriding below Css classes in your sample. Refer the below code for that. 

<style> 

    .e-btn-width { 

        border-radius: 0; 

        width: 100%; 

    } 

    .e-accordion .e-acrdn-item .e-acrdn-header { 

        padding: 0 !important; 

    } 

    .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content { 

        width: 100% !important; 

    } 

    .e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-content > .container { 

       padding: 0 !important; 

    } 

</style> 

Also, we have modified your shared sample code for your reference which can be downloaded from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AccordionComponent830307389  

Kindly get back to us, If you need further assistance. 

Regards 

Alagumeena.K