Kendo Splitter does not properly resize in a window

[Michelle]

Hi, please look at the following example:

http://docs.telerik.com/kendo-ui/controls/layout/window/how-to/add-auto-resizing-splitter

Please run the example and follow these steps:

1. Move the splitter to the right.

2. Move mouse to the right edge of the window and drag towards the left.

(i.e. resize the window to be smaller using the right edge of the window)

3.  Note that the splitter does not resize proportionally and becomes hidden such that you can no longer operate the splitter.

 

Are there any fixes/workarounds for this?

 

Thanks,

Michelle

[Dimo]

Hi Michelle,

The observed behavior is related to the following logic of the Splitter widget:

- initially, no pane sizes are specified, so the layout is constructed proportionately (e.g. 50%/50%) and the pane proportions are maintained if the whole widget is resized
- as soon as the user resizes a pane, the pane sizes start to be calculated and applied as fixed amounts, instead of proportions
- if the whole widget is resized now,  proportionate sizes will not be applied

To change the above behavior, you can use the following approach:

http://docs.telerik.com/kendo-ui/controls/layout/splitter/how-to/keep-pane-size-in-percentages

The idea is to reset the pane sizes in the Splitter's resize event. Feel free to modify the logic, according to your preferences and requirements.

Another option is to enable Window scrolling by removing the overflow:hidden style, but this is not recommended, as it may result in scrollbar and Splitter flickering during resize.

Regards,
Dimo
Telerik