Disable splitter handle

Radzen.Blazor Components
1

I'm using version 5.06

I have a page with a simple splitter using buttons to open/collapse the splitter. I would like to disable the user ability to resize the splitter - instead relying only on user actions (in this case, button press) to split / unsplit the window.

Is this possible? Here is my page code example:


@page "/"
@rendermode RenderMode.InteractiveServer
<RadzenComponents/>
<RadzenSplitter Orientation="Orientation.Horizontal" Style="height: 400px; border: 1px solid #777777;">
	<RadzenSplitterPane  Size="30%" Min="30%" Max="100%" Resizable=true Style="border: 1px solid #777777;">
		<div style="float: left;margin:8px;">
			<RadzenButton Icon="add" Click="@OpenSplitter" Disabled="@(!rightPaneCollapsed)"/>
		</div>
	</RadzenSplitterPane>
	<RadzenSplitterPane Collapsible="true" Resizable=true Collapsed="@rightPaneCollapsed" Min="40px">
		<div style="float: right;margin:8px;">
			<RadzenButton Icon="close" Click="@CloseSplitter" Disabled="@(rightPaneCollapsed)" />
		</div>
	</RadzenSplitterPane>
</RadzenSplitter>


@code {
	bool rightPaneCollapsed = false;

	void CloseSplitter()	{ rightPaneCollapsed = true; }
	void OpenSplitter()		{ rightPaneCollapsed = false; }
}
2

Resizing can be disabled if you set Resizable to false.

3

Thank you. I've tried setting resizable with unsatisfactory results

If I set Resizable=false on the first / left pane, I get an unhandled excaption. The first splitterpane must be true, it seems.

If I set resizable=false on the second / right pane, the panels are not split - they are either one or the other. The splitter handle is removed, the collapse icons are visible and work, but eventually throws an unhandled exception.

Please take a closer look at the code, perhaps run it and observe the behavior, and tell me what settings to use?

Thank You.

4

We've fixed the exception and the fix will be part of our next update later today.

5

Downloaded and installed 5.09 today and can confirm that the exception is no longer thrown.

However, I'm still unsure of how to achieve my objective:

Start the page with the right panel collapsed.
On an action in the left panel (in this case a button) display the right panel in a 30/70% split.

I'm able to get this to work correctly using the collapsed attribute.

I would like to remove the splitter handles, preventing the user from resizing the splitter using anything but the supplied actions (buttons, in this case.)

Setting resizable on either pane prevents the 70/30 split.

This may not be possible in the current version - in which case I would like to request a feature to enable/disable the display of the handles on the splitter.

Thank you.

6

What happens if you set Resizable=false for both panes? Are you still able to resize?

7

Only the left pane is displayed and the collapse feature does not work - the right pane is never displayed

8

Here is what I see using your code with Resizable=false in our demos:

image
image1920×1080 292 KB

9

The splitter pane in your video and in my testing remains at 30%; It should move all the way to the right, making the left hand pane fill the browser window.

10

This is something different from what you’ve said in your previous reply:

The pane is exactly the size you’ve specified: 30% and since the resizing is now disabled I’m not sure what should:

11

I was finally able to understand what you are trying to achieve. You can leave Resizeble=true for both panes and use the following CSS to disable resize by the user:

<style>
	.rz-splitter-bar-resizable {
		pointer-events: none;
	}
</style>
12

Thank you - that works a treat. I disabled the collapse buttons as well using

<style>
    .rz-splitter-bar-resizable {
        pointer-events: none;
    }

    .rz-splitter-bar-collapsible {
        pointer-events: none;
    }
</style>
13

Where can I find the css containing
rz-splitter-bar-resizable

I looked in the Radzen.Blazor\themes\components\blazor folder but couldnt find a scss that contained these

14

For that matter, I can't find the component for RadzenSplitter - is it in the github repo?

15

Check this code:

The CSS is actually output from SASS:

16

Neglected to send my thanks for this response.
Very helpful (as usual.)
I've evaluated all the Blazor UI frameworks and keep coming back to this one as the most reliable, accessible and easiest to implement. I'm using Oqtane framework for the inrastructure and it integrates nicely thanks to @leigh-pointer