accordiaon border

[Sarah]

Hi,

I used the link below and even though I used your source code I get a different output!

https://blazor.syncfusion.com/documentation/accordion/how-to/add-icon-to-accordion-header

I want to:

1-Remove the AccordionItem Header borders

2-Decrease AccordionItem  Header  height

3-Change the color of the titles to black

[Swathi Ravi]

Hi Sarah,

Thank you for reaching out to us!

To achieve the desired layout, you can utilize the Material theme. The provided documentation code works as expected on our end. For your reference, we’ve shared a sample below:

Sample: https://blazorplayground.syncfusion.com/rjLItCrQzmlkoPAi

Regards,
Swathi

[Sarah]

Hi,

Hello, thank you for your reply

Your link has an error and I could not open your source.

I am using different themes and I fixed the first and third issues using templates. For the second issue I have written the following code and unfortunately it is not working properly when clicking on the header.

Attachment: Index_cfdad3f9.zip

[Swathi Ravi]

Sarah,

 

You can change the accordion item header height by using the below shared css styles.

 

<style>

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

        height:30px;

    }

</style>

 

Sample: https://blazorplayground.syncfusion.com/BjVSjshYfKEiqUiV 

UG: https://blazor.syncfusion.com/documentation/accordion/style#customizing-accordion-item-header

[Sarah]

Hi

Thanks for your reply

Unfortunately your sample is wrong again. I used your style code but the height did not change.

[Swathi Ravi]

Sarah,

The issue is that the header's min-height is set to 38px, which prevents the height below from being defined. You can adjust the min-height and then set the desired height accordingly. Same attached as a zip file.

<style>

    .e-accordion .e-acrdn-item .e-acrdn-header,

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

        min-height: 10px;

        height: 20px;

        padding: 0px 7px;

    }

</style>

Attachment: blazoraccordion_9f6722f1.zip

[Sarah]

Hi Swathi Ravi

The problem is resolved. 

Thank you for your quick response.

[Swathi Ravi]

You are welcome, Sarah! We are glad to hear that our provided solution was worked for you. Get back to us if you have any further questions.