I have a splitter pane with 3 panels. If you resize the left panels (drag it back and forth), then the right panels incrementally increases in size. Similarly with anything more than 2 panels.

https://blazorrepl.telerik.com/GpOKaRFn37OSfEyp53

Grab any of the left splitters and drag them back and forth quickly. You will see the right panels increasing in size.

The problem occurs in Google Chrome when the pane Size is set in percent.

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!

I want to display 2 or 3 panes in a splitter but after hiding the middle pane and showing it again its position is not saved, it appears at the end of the splitter as per the example below.

What is the best way to keep pane order ?

<div style="width: 500px; height: 300px; border: 1px solid red;">
 
    <TelerikSplitter @ref="ts" Width="100%" Height="100%" Orientation="@SplitterOrientation.Horizontal">
        <SplitterPanes>
 
            <SplitterPane Size="20%" Collapsible="true">
                <div>left</div>
            </SplitterPane>
 
            @if (bunique)
            {
            <SplitterPane Size="10%" Collapsible="true">
                <div>middle</div>
            </SplitterPane>
            }
 
            <SplitterPane>
                <div>right</div>
            </SplitterPane>
 
        </SplitterPanes>
    </TelerikSplitter>
 
</div>
 
@code{
    bool bunique = false;
    Telerik.Blazor.Components.TelerikSplitter ts;
 
    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            if (!bunique)
            {
                bunique = true;
                StateHasChanged();
            }
        }
    }
}

The Splitter separator has role="separator" attribute. When such a role is set and the separator is focusable, it is required that aria-valuenow attribute is also set. Currently, the Splitter separator does not have such an attribute.

From our point of view, the expected result is - NVDA / Narrator should announce separator value with respect to the position value for the separator (or no separator value at all).

If I add a Grid inside pane 1, pane 2 doesn't expand when clicked.

Reproduction: https://blazorrepl.telerik.com/cxkqwAFj38FBkmbP09.

For reference, collapsing and expanding panes works well when adding another component or HTML content: https://blazorrepl.telerik.com/cHEqmAlN35ZSfRKi13.

===

ADMIN EDIT

===

For the time being, a possible workaround is to alter the configuration to allow the user to resize and expand the pane. Here is an example: https://blazorrepl.telerik.com/mdEKcgFZ45D7rJU013.

When trying to drag/resize the splitter to the sides on a touch screen, you are only able to move the splitter a little bit before the whole screen starts moving.

To reproduce, go to the splitter demo (Blazor Splitter Demos - Overview | Telerik UI for Blazor), open the inspector, and change the view to a mobile device. I tested specifically on the iPad option.

I've tested the behavior on an Amazon Fire 10, One Plue 8T, and a Google Pixel 4, and all 3 of them have displayed the behavior. I also tested on a 7th gen Ipad (in safari) and found the control did indeed work as expected there.

I want to control if the SplitterPane is collapsed or not from code. When I bind the Collapsed parameter of a SplitterPane to a variable, on initial load the SplitterPane is Collaped/Expanded based on the provided value. But when I change the value during run time, the splitter doesn't react.

The same behavior is observed if I try to programmatically change the Size of the SplitterPane.