Code:
---
@page "/Splitter"
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Layouts
@using Syncfusion.Blazor.Buttons
<SfSplitter @ref="SplitterObj" Height="200px" Width="600px" SeparatorSize=2>
<SplitterPanes>
<SplitterPane Collapsible="true" CssClass="class-1">
<ChildContent>
<div>
<div class="content">
<h3 class="h3">PARIS </h3>
Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism...
</div>
</div>
</ChildContent>
</SplitterPane>
<SplitterPane Collapsible="true" Collapsed="true" CssClass="class-2">
<ChildContent>
<div>
<div class="content">
<h3 class="h3">CAMEMBERT </h3>
The village in the Orne department of Normandy where the famous French cheese is originated from.
</div>
</div>
</ChildContent>
</SplitterPane>
</SplitterPanes>
</SfSplitter>
<div id="button-container">
<SfButton OnClick="@ExpandClick"> Expand </SfButton>
<SfButton OnClick="@CollapseClick"> Collapse </SfButton>
</div>
<style>
.content {
padding: 10px;
}
#button-container {
display: flex;
margin: 20px 22% 40px;
}
</style>
@code {
SfSplitter SplitterObj;
private void ExpandClick(MouseEventArgs args) { SplitterObj.Expand(1); }
private void CollapseClick(MouseEventArgs args) { SplitterObj.Collapse(1); }
}
----
1.
When I open the page and click the Expand button, the right side correctly expands over the half of the splitter.
When I then click on the Collapse button, the expected behavior is that the right-half disappears again, but instead it displays over the full width.
Best regards,
Michael Brignola