Hide Splitter Bar

[Simon]

Hi all,

I'm using SfSplitter to segment my screen and would like to know how I can hide the splitter bars totally (ideally make them a height of 0).

I'm assuming it's a css parameter, but can't seem to find anything that works.

Thanks in advance

Simon

[Indrajith Srinivasan]

Hi Simon, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query “How I can hide the splitter bars totally ”. You can hide the split-bar by using the CSS style (display: none) for the SfSlitter bar class(e-split-bar). Check the below code blocks for reference. 

 

 

@using Syncfusion.Blazor.Layouts 

 

<div>Horizontal Splitter</div> 

 

<SfSplitter Height="240px" Width="100%"> 

    <SplitterPanes> 

        <SplitterPane> 

            <ContentTemplate> 

                <div> Left Pane </div> 

            </ContentTemplate> 

        </SplitterPane> 

        <SplitterPane> 

            <ContentTemplate> 

                <div> Middle Pane </div> 

            </ContentTemplate> 

        </SplitterPane> 

        <SplitterPane> 

            <ContentTemplate> 

                <div> Right Pane </div> 

            </ContentTemplate> 

        </SplitterPane> 

    </SplitterPanes> 

</SfSplitter> 

 

<style> 

    .e-splitter .e-split-bar { 

        display: none !important; 

    } 

</style> 

 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith