Change Color of Seperator or set Seperator Size to 0

[Klaus Kirchhoff]

How can I change the color of a Splitter separator?

I found this template:

        <Separator>
            <div style="height: 10px; border: 2px solid red"></div>
        </Separator>

However, I don’t want to change only the icon but also the color of the line (vertical or horizontal). How can I achieve this?

I already know how to change SeparatorSize.

Thanks for your help! 😊

[Yohapuja Selvakumaran]

Hi Klaus Kirchhoff,

Thank you for reaching out to us.

We have validated your requirement, and you can customize the color of the splitter separator or make its size zero. Below are the code snippets to achieve these:

To Change the Color:

 

   .e-splitter .e-split-bar.e-split-bar-horizontal {

    background: black;

    }

 

 

You can view this in action using the sample:

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

To Make the Size Zero:

 

   .e-splitter .e-split-bar.e-split-bar-horizontal {

    display : none;

    }

 

 

You can view this in action using the sample:

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

We hope this meets your requirements. Please feel free to reach out if you have any further questions or need additional assistance.

Regards,

Yohapuja S