jube-fork/Jube.App/wwwroot/kendo/examples/toolbar/resizing.html

<!DOCTYPE html>
<html>
<head>
    <title>Resizing</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
            <div id="example">
             <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>

            <div id="window">
                <div id="toolbar"></div>
                <div id="content">
                    <div class="demo-section k-content">
                        <ul>
                            <li><label>To:</label> <input type="text" class="k-textbox" id="to"/></li>
                            <li><label>Title:</label> <input type="text" class="k-textbox" id="title"/></li>
                        </ul>
                    </div>
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    $("#window").kendoWindow({
                        resizable: true,
                        width: 890,
                        height: 200,
                        minWidth: 430,
                        maxWidth: 1200,
                        title: "Message",
                        close: function() {
                            $("#undo").show();
                        }
                    });

                    $("#undo").bind("click", function() {
                        $("#window").data("kendoWindow").open();
                        $("#undo").hide();
                    });

                    $("#toolbar").kendoToolBar({
                        items: [
                            {
                                template: "<img src='../content/web/toolbar/user.png' class='user-image' />",
                                overflow: "never"
                            },
                            { type: "button", text: "Send", overflow: "never" },
                            { type: "button", text: "Discard", overflow: "never" },
                            { type: "separator" },
                            {
                                type: "splitButton",
                                imageUrl: "../content/web/toolbar/save.png",
                                text: "Save",
                                menuButtons: [
                                    { imageUrl: "../content/web/toolbar/save.png", text: "Save as" },
                                    { imageUrl: "../content/web/toolbar/upload.png", text: "Upload to drive" }
                                ]
                            },
                            {
                                type: "splitButton",
                                imageUrl: "../content/web/toolbar/reply.png",
                                text: "Reply",
                                menuButtons: [
                                    { imageUrl: "../content/web/toolbar/save.png",  text: "Reply All" },
                                    { imageUrl: "../content/web/toolbar/forward.png", text: "Forward" },
                                    { imageUrl: "../content/web/toolbar/reply.png", text: "Reply & Delete" }
                                ]
                            },
                            { type: "separator" },

                            {
                                template: "<span><label>Contacts:</label><input id='contacts' style='width: 150px;' /></span>",
                                overflow: "never"
                            },
                            {
                                template: "<div><label>Labels:</label><input id='labels' style='width: 150px;' /></div>",
                                overflowTemplate: "<span></span>"
                            },
                            { type: "separator" },
                            {
                                type: "buttonGroup",
                                buttons: [
                                    { imageUrl: "../content/web/toolbar/done.png", text: "Done", togglable: true, group: "category" },
                                    { imageUrl: "../content/web/toolbar/todo.png", text: "To Do", togglable: true, group: "category" },
                                    { imageUrl: "../content/web/toolbar/important.png", text: "Important", togglable: true, group: "category" }
                                ]
                            },
                        ]
                    });

                    $("#contacts").kendoDropDownList({
                        optionLabel: "Ann Devon",
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Ana Trujillo", value: 1 },
                            { text: "Antonio Moreno", value: 2 },
                            { text: "Christina Berglund", value: 3 },
                            { text: "Felipe Izquierdo", value: 4 }
                        ]
                    });

                    $("#labels").kendoDropDownList({
                        optionLabel: "Forums",
                        dataTextField: "text",
                        dataValueField: "value",
                        dataSource: [
                            { text: "Follow up", value: 1 },
                            { text: "Misc", value: 2 },
                            { text: "Priority", value: 3 },
                            { text: "Deleted Messages", value: 4 }
                        ]
                    });

                    $("#masked").kendoNumericTextBox();

                });
            </script>

            <style>
                div.k-window-content {
                    padding: 0;
                }

                #toolbar {
                    border-width: 0 0 1px;
                }
                .user-image {
                    margin: 0 .5em;
                }
                #example {
                    height: 500px;
                }
                #example .box p {
                    padding-bottom: 5px;
                }
                #content .demo-section {
                    margin: 0;
                    padding: 10px;
                    border-width: 0 0 1px 0;
                }
                #content .demo-section label {
                    display: inline-block;
                    width: 40px;
                    text-align: right;
                    line-height: 2.5em;
                    vertical-align: middle;
                }
                #content .demo-section input {
                    width: 80%;
                }
            </style>

        </div>


    
</body>
</html>