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

Appearance

The ToolBar enables you to resize it and control its rendering on mobile devices.

Resizing

By design, the ToolBar detects changes in the viewport width and hides the overflowing controls in the command overflow popup. This feature may be disabled by setting resizable option to false. You are able to control the way a given command behaves on resizing with its overflow property.

  • Declare commands with overflow: "never" first followed by those with overflow: "auto". Declare commands with overflow: "always" last.
  • Setting the minimum width of the ToolBar element is mandatory for preventing the ToolBar from resizing below a given width.

The following example demonstrates how to use the overflow property.

<div id="toolbar" style="min-width: 240px;"></div>

<script>
    $("#toolbar").kendoToolBar({
        items: [
            { overflow: "never", template: '<input id="search" />' },
            { overflow: "never", type: "button", text: "Never" },
            { overflow: "auto", type: "button", text: "Auto 1" },
            { overflow: "auto", type: "button", text: "Auto 2" },
            { overflow: "always", type: "button", text: "Always" }
        ]
    });
</script>

See Also

In this article