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

Resizable

configuration

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

When set to true, the resizable configuration triggers overflow: hidden; CSS property.

resizable

Boolean

Default: true

<div style="width: 350px; border: 1px solid #ccc; padding: 10px 10px 50px;">

    <h5>Non-Resizable ToolBar</h5>
    <div id="toolbar-non-resizable"></div>

    <h5>Resizable ToolBar</h5>
    <div id="toolbar-resizable"></div>

</div>

<script>
    $("#toolbar-non-resizable").kendoToolBar({
        resizable: false,
        items: [
            { type: "button", text: "Button 1" },
            { type: "button", text: "Button 2" },
            { type: "button", text: "Button 3" },
            { type: "button", text: "Button 4" }
        ]
    });

    $("#toolbar-resizable").kendoToolBar({
        resizable: true,
        items: [
            { type: "button", text: "Button 1" },
            { type: "button", text: "Button 2" },
            { type: "button", text: "Button 3" },
            { type: "button", text: "Button 4" }
        ]
    });
</script>