RadzenSplitterPane & Size property

Radzen.Blazor Components
1

First, great work with the platform.

I am using Radzen.Blazor component RadzenSplitterPane.
The way I was intended was to have a resizable footer/console. The main issue, is that can not set the Size property on the last Pane.

Something like this:

<RadzenSplitter>
    <RadzenSplitterPane>
        Pane B1            
    </RadzenSplitterPane>
    <RadzenSplitterPane>
        Pane B2
    </RadzenSplitterPane>
    <RadzenSplitterPane Size="100px">
        Pane B3            
    </RadzenSplitterPane>            
</RadzenSplitter>

Will not render appropriately and "hide" the last pane, making it 0Px.

Can you clarify the intended behavior, and an appropriate work around?

Thanks in advance.

2

You need to set Size for the other panes as well since they will occupy the space with 100% width by default.

3

They idea is that the bottom Pane would take image 200px, and the top pane would take the rest.

4

You can use percent values for Size, Min and Max as shown in our demo:

image
image1920×1080 208 KB

5

What can you do, if you want to set explicit size in pixels to the last pane, instead of a percentage? I noticed in the demo, the first two rows are explicitly set to 100px and the last one takes whatever space is left. If however, you set the first and last row to 100px and let the middle one take up the rest of the space, the result is not pretty. Is this not supported? Will it be supported at some point in the future? Do you know any workaround?

6

This code might help you in your case:

<style type="text/css">
    .rz-splitter-pane {
        flex: 0 1 auto;
    }
</style>

<RadzenSplitter>
    <RadzenSplitterPane Size="100px">
        Left
    </RadzenSplitterPane>
    <RadzenSplitterPane>
        Middle
    </RadzenSplitterPane>
    <RadzenSplitterPane Size="100px">
        Right
    </RadzenSplitterPane>
</RadzenSplitter>

image
image1920×1080 209 KB

1 Like
7

This works great! Thank you