Edit this page

resizable Boolean (default: true)

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.

Example - Resizable and Non-Resizable ToolBar

<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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy