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 withoverflow: "auto". Declare commands withoverflow: "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>