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.