Hello,
I'm currently using the Splitter Pane in a UI where I have two grids (one is a config grid and one is a report). The splitter allows me to resize each section vertically to see more of the report or the grid. It works well, but there is a bug I've noticed where if I click and drag it to the end and scroll past (making it 100%), even though I've released my finger from clicking, when my mouse scrolls back into the pane, it will be stuck scrolling as if my finger was still clicking the mouse button. It results in very weird behavior. If you allow the pane to go to 100% it is very difficult to not have this experience. My only way to mitigating is not allowing it to scroll as far, but it still still happens if you scroll outside of the pane fast enough.
If you go to your example here, you can witness the same issue.
https://docs.telerik.com/blazor-ui/components/splitter/size
Any idea on a way to mitigate this? I think if the mouse leaves the pane, it should stay where it was scrolled to and assume you are no longer scrolling. It is a great component otherwise!
Thanks!
Hello,
We render a Splitter with just one pane and then add another pane programmatically. The new pane triggers a JavaScript error if resized. The error disappears if the pane is collapsed and then expanded. Another possible workaround is to render the pane with zero size.
Test page:
<TelerikButton OnClick="@BugHandler">Enable second pane (bug)</TelerikButton>
<br /><br />
<TelerikSplitter Orientation="SplitterOrientation.Vertical" Height="200px">
<SplitterPanes>
<SplitterPane>
<div>First pane</div>
</SplitterPane>
@{
if (EnablePane2)
{
<SplitterPane Collapsible="true">
<div>
Second pane
</div>
</SplitterPane>
}
}
</SplitterPanes>
</TelerikSplitter>
<br />
<TelerikButton OnClick="@WorkaroundHandler">Enable second pane (workaround)</TelerikButton>
<br /><br />
<TelerikSplitter Orientation="SplitterOrientation.Vertical" Height="200px">
<SplitterPanes>
<SplitterPane>
<div>First pane</div>
</SplitterPane>
<SplitterPane Collapsible="@Collapsible2" Resizable="@Resizable2" Size="@Size2" Collapsed="@Collapsed2">
<div>
Second pane
</div>
</SplitterPane>
</SplitterPanes>
</TelerikSplitter>
@code {
bool EnablePane2 { get; set; } = false;
bool Collapsible2 { get; set; }
bool Resizable2 { get; set; }
string Size2 { get; set; } = "0px";
bool Collapsed2 { get; set; } = true;
void BugHandler()
{
EnablePane2 = true;
}
void WorkaroundHandler()
{
Collapsible2 = true;
Resizable2 = true;
Size2 = "";
Collapsed2 = false;
}
}