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

Resize the Editor by Dragging


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


How can I resize the Kendo UI for jQuery Editor by dragging?


The following example demonstrates how to resize the Kendo UI Editor by dragging its bottom-right corner.

      .editor-wrap {
        position: relative;
      .editor-wrap .k-overlay {
        position: absolute;
        opacity: 0;
        z-index: 1;
      .editor-wrap .k-resize-se {
        position: absolute;
        z-index: 2;
        bottom: 6px;
        right: 6px;
      .editor-wrap > .k-editor {
        height: 100%;

    <div class="editor-wrap">
      <textarea id="editor1" class="kendoEditor"></textarea>

    <br /><br />

    <div class="editor-wrap">
      <textarea id="editor2" class="kendoEditor"></textarea>


      // When you use server-side wrappers, the Editor initialization statements will be autogenerated.



      // Custom code starts here.
      // Wrap it in a document.ready handler.
      // Otherwise, it will be executed before the Editors are created.

        var wrappers = $(".editor-wrap");
        wrappers.each(function(idx, element){
          var wrapper = $(element);
          // Add the resize handle.
          var resizeHandle = $("<span class='k-icon k-resize-se' />").appendTo(wrapper);

            dragstart: function(e) {
              // Overlay the iframe to prevent an event gap.
              wrapper.append("<div class='k-overlay' />");
              // Cache some offsets for later use.
     = wrapper.offset().top - this.element.height();
              this.left = wrapper.offset().left - this.element.width();
              var win = $(window);
              this.scrollTop = win.scrollTop();
              this.scrollLeft = win.scrollLeft();
            drag: function(e) {
              // Update the wrapper height.
              wrapper.children(".k-editor").height((e.clientY || e.originalEvent.clientY) - + this.scrollTop);
              wrapper.width((e.clientX || e.originalEvent.clientX) - this.left + this.scrollLeft);
            dragend: function(e) {
              // Remove the overlay.



See Also

In this article