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.