Kendo Splitter does not properly resize in a window

2 posts, 0 answers
  1. Michelle
    Michelle avatar
    33 posts
    Member since:
    Feb 2015

    Posted 30 Jun Link to this post

    Hi, please look at the following example:

    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?




  2. Dimo
    Dimo avatar
    8318 posts

    Posted 01 Jul Link to this post

    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:

    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.

    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top