Odd Splitter rendering

I am experimenting with the Splitter Blazor control using some of the sample code in the documentation. I am getting some rather strange rendering results. instead of sections laid out horizontally with splitters in between the I am getting the following:



This is the code I am using for the page. It is straight out of the sample code:

@page "/"
@using Syncfusion.Blazor;
@using Syncfusion.Blazor.Layouts;

<div>Test</div>

<SfSplitter Height="200px" Width="600px">
    <SplitterPanes>
        <SplitterPane Content="@Content1" Size="200px"></SplitterPane>
        <SplitterPane Content="@Content2" Size="200px"></SplitterPane>
        <SplitterPane Content="@Content3" Size="200px"></SplitterPane>
    </SplitterPanes>
</SfSplitter>

<style>
    .content {
        padding: 10px;
    }
</style>

@code {

    public string Content1 = "<div class='content'>" +
                            "<h3 class='h3'>Grid </h3>" +
                            "The ASP.NET DataGrid control, or DataTable is a feature-rich control used to display data in a tabular format.</div>";

    public string Content2 = "<div class='content'>" +
                            "<h3 class='h3'>Schedule </h3>" +
                            "The ASP.NET Scheduler, a.k.a. event calendar, facilitates almost all calendar features, thus allowing users to manage their time efficiently </div>";

    public string Content3 = "<div class='content'>" +
                            "<h3 class='h3'>Chart </h3>" +
                            "ASP.NET charts, a well-crafted easy-to-use charting package, is used to add beautiful charts in web and mobile applications </div>";

}

Please advise.


1 Reply 1 reply marked as answer

IS Indrajith Srinivasan Syncfusion Team June 15, 2020 05:35 AM UTC

Hi Jim,

Greetings from Syncfusion support,

We have validated your reported query.Based on the shared code blocks, the SfSplitter is not rendered due to missing style references. We suggest you to refer the style in the ~/Pages/_Host.cshtml page. Below is the style reference link.
 
 
 
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 
 
 

Please let us know if you have any concerns,

Regards,
 
Indrajith 


Marked as answer
Loader.
Up arrow icon