New to Kendo UI for jQuery? Download free 30-day trial

Keep the Pane Size of the Splitter in Percentage Points


Product Progress® Kendo UI® Splitter for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I keep the Kendo UI Splitter pane sizes in percentages upon user resize?


The following example demonstrates how to achieve the desired scenario.

    <div id="splitter" style="height: 400px">
        Left pane

      $(document).ready(function() {
        function onResize(e) {
          // Prevent the endless recursion from resizes.
          if (!this.appliesSizes) {
            this.appliesSizes = true;

            // Calculate the pane width.
            var element = this.element;
            var pane = element.find(".k-pane:first");
            var ratio = Math.ceil(pane.width() * 100 / element.width());

            // Set the pane width in percentage points.
            this.size(pane, ratio + "%");

            this.appliesSizes = false;

          panes: [
            { collapsible: true, size: "20%" },
            { collapsible: false }
          resize: onResize

See Also

In this article