SfSplitter with sticky content

[Volker]

Let's say we have a main/detail page.

How can we make the right splitter pane stay on top when we scroll down the page so it stays in view?

This doesn't work:

@page "/stickytest/"


@using Syncfusion.Blazor.Layouts


<h1>Sticky Test</h1>
<div class="row rowshaper">
    <SfSplitter Height="100%" SeparatorSize="20">
        <SplitterPanes>
            <SplitterPane>
                <ContentTemplate>
                    <h2>Choose</h2>
                    @{
                        for (int i = 1; i <= 500; i++)
                        {
                            var j = i;
                            <div class="cursor-pointer" onclick="@(() => UpdateSticky(j))">row @i</div>
                        }
                    }
                </ContentTemplate>
            </SplitterPane>
            <SplitterPane>
                <ContentTemplate>
                    <div class="sticky">
                        <h2>Detail</h2>
                        <h3>chosen row: @detailID</h3>
                    </div>
                </ContentTemplate>
            </SplitterPane>
        </SplitterPanes>
    </SfSplitter>
</div>




@code {
    public int detailID { get; set; }


    private void UpdateSticky(int i)
    {
        detailID = i;
        InvokeAsync(() => { StateHasChanged(); });
    }
}


<style>


    .rowshaper {
        width: 100%;
        height: 100vw;
    }


    div.sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100px;
        background-color: #eeeeff;
    }
</style>

[Yohapuja Selvakumaran]

Hi Volker

Thank you for reaching out to us. We have made the required modifications to the sample, aligning it with your specific request. Now, when scrolling the page, the second splitter content remains fixed as per your requirement. Kindly check out the attached sample and gif image for more reference.

Code Snippet:

 

<h1>Sticky Test</h1>

<div class="row rowshaper">

    <SfSplitter Height="100%" SeparatorSize="20">

        <SplitterPanes>

            <SplitterPane>

                <ContentTemplate>

                    <h2>Choose</h2>

                    @{

                        for (int i = 1; i <= 500; i++)

                        {

                            var j = i;

                            <div class="cursor-pointer" onclick="@(() => UpdateSticky(j))">row @i</div>

                        }

                    }

                </ContentTemplate>

            </SplitterPane>

            <SplitterPane CssClass="e-custom">

                <ContentTemplate>

                    <div class="sticky">

                        <h2>Detail</h2>

                        <h3>chosen row: @detailID</h3>

                    </div>

                </ContentTemplate>

            </SplitterPane>

        </SplitterPanes>

    </SfSplitter>

</div>

 

@code {

    public int detailID { get; set; }

    private void UpdateSticky(int i)

    {

        detailID = i;

        InvokeAsync(() => { StateHasChanged(); });

    }

}

 

 

<style>

    .rowshaper {

        width: 100%;

        height: 100vw;

    }

 

   .sticky {

        position: fixed;

        overflow-y: auto; /* Enable vertical scrolling if content overflows */

        background-color: yellow; /* Optional styling */

        border-left: 1px solid #ccc; /* Optional styling for a border */

    }

</style>

 

Regards,

Yohapuja S

Attachment: Splitter_Pane2_9541c3a3.zip