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

Resizable.toolbar

configuration

If resizable is set to true the widget will detect changes in the viewport width and will hide the overflowing controls in the tool overflow popup.

If resizable.toolbar is assigned an object, it will propagate the Toolbar.overflow configuration to the Editor's toolbar.

Tools are shown/hidden on tool group level. Tools with popup such as fontName, fontSize, fontColor, backColor, formatting and createTable will not be moved to the tool overflow popup and will be always visible.

resizable.toolbar

Boolean|Object

Default: false

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  resizable: {
      toolbar: true
  }
});
</script>

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
  resizable: {
    toolbar: {
        mode: "section"
    }
  }
});
</script>

resizable.toolbar.mode

String

Defines the overflow mode. The available options are:

"menu" — Moves overflowing items into a dropdown menu.
"scroll" — Keeps items visible and enables horizontal scrolling.
"section" — Groups items into collapsible sections.
"none" — Disables overflow handling; items may be cut off.

Default: "menu"

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    resizable: {
        toolbar: {
            mode: "scroll"
        }
    }
});
</script>

resizable.toolbar.scrollButtons

String

Defines the visibility of scroll buttons when mode is "scroll". The available options are:

"auto" — Displays scroll buttons only when needed.
"hidden" — Hides the scroll buttons at all times.
"visible" — Always shows the scroll buttons.

Default: "auto"

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    resizable: {
        toolbar: {
            mode: "scroll",
            scrollButtons: "visible"
        }
    }
});
</script>

resizable.toolbar.scrollButtonsPosition

String

Defines the placement of scroll buttons. The available options are:

"split" — Scroll buttons appear at both ends of the toolbar.
"start" — Scroll buttons appear only at the start of the toolbar.
"end" — Scroll buttons appear only at the end of the toolbar.

Default: "split"

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    resizable: {
        toolbar: {
            mode: "scroll",
            scrollButtonsPosition: "end"
        }
    }
});
</script>

resizable.toolbar.scrollDistance

Number

Specifies the distance (in pixels) the toolbar scrolls when a scroll button is clicked.

Default: 50

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
    resizable: {
        toolbar: {
            mode: "scroll",
            scrollDistance: 100
        }
    }
});
</script>