Multiselect k-invalid-msg span alignment

4 posts, 0 answers
  1. Scott Marx
    Scott Marx avatar
    38 posts
    Member since:
    Apr 2010

    Posted 24 Aug 2013 Link to this post

    Why does the k-invalid-msg span on a multiselect validator not line up like on any other control?

    Testing.html
    <!DOCTYPE html>
    <html>
    <head>
    <title>Testing</title>
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://cdn.kendostatic.com/2013.2.716/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="grid"></div>
    <div id="editform"></div>
    <script>
    var editWindow;
    $(document).ready(function () {
    var crudServiceBaseUrl = "http://demos.kendoui.com/service",
    dataSource = new kendo.data.DataSource({
    transport: {
    read: {
    url: crudServiceBaseUrl + "/Products",
    dataType: "jsonp"
    },
    update: {
    url: crudServiceBaseUrl + "/Products/Update",
    dataType: "jsonp"
    },
    destroy: {
    url: crudServiceBaseUrl + "/Products/Destroy",
    dataType: "jsonp"
    },
    create: {
    url: crudServiceBaseUrl + "/Products/Create",
    dataType: "jsonp"
    },
    parameterMap: function (options, operation) {
    if (operation !== "read" && options.models) {
    return { models: kendo.stringify(options.models) };
    }
    }
    },
    batch: true,
    pageSize: 20,
    schema: {
    model: {
    id: "ProductID",
    fields: {
    ProductID: { editable: false, nullable: true },
    ProductName: { validation: { required: true} },
    UnitPrice: { type: "number", validation: { required: true, min: 1} },
    Discontinued: { type: "boolean" },
    UnitsInStock: { type: "number", validation: { min: 0, required: true} }
    }
    }
    }
    });

    $("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 430,
    columns: [
    { field: "ProductName", title: "Product Name" },
    { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
    { field: "UnitsInStock", title: "Units In Stock", width: "100px" },
    { field: "Discontinued", width: "100px" },
    { command: [{ name: "edit", text: "", click: showEdit }, { name: "destroy"}], title: "&nbsp;", width: "160px"}]
    });
    });
    function showEdit(e) {
    e.preventDefault();
    editWindow = $("#editform")
    .kendoWindow({
    title: "Edit Test",
    modal: true,
    visible: false,
    resizable: false,
    width: 960,
    content: { url: "EditTemplate.htm" }
    }).data("kendoWindow");
    $("#editform").closest(".k-window").css({
    top: 10,
    left: 10
    });
    editWindow.open();
    }
    </script>
    <style scoped>
    body
    {
    font-family: 'Century Gothic';
    font-size: 11px;
    }
    </style>
    </body>
    </html>


    EditTemplate.html

    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div>
    <div id="addRule-div">
    <div>
    <label for="LoanProduct" class="control-label">Loan Products:</label>
    <div>
    <select style="width:450px;" id="LoanProduct" name="LoanProduct" multiple="multiple" data-placeholder=" " required validationMessage="Loan Product required.">
    <option>Test</option>
    <option>Testing</option>
    </select>
    <span class="k-invalid-msg" data-for="LoanProduct"></span>
    </div>
    </div>
    <div>
    <label for="Title" class="control-label">Title:</label>
    <div>
    <input style="width:450px;" id="Title" name="Title" class="k-textbox" required validationMessage="Title is required." />
    <span class="k-invalid-msg" data-for="Title"></span>
    </div>
    </div>
    <div>
    <div>
    <button id="addRule-Button" class="k-button" type="submit">Add Rule</button>&nbsp;
    </div>
    </div>
    </div>
    </div>
    <script>
    $(function () {
    $("#LoanProduct").kendoMultiSelect().data("kendoMultiSelect");
    var validator = $("#addRule-div").kendoValidator().data("kendoValidator");
    $("#addRule-Button").click(function () {
    if (validator.validate()) {
    console.log("validate");
    }
    });
    });
    </script>
    </body>
    </html>
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 26 Aug 2013 Link to this post

    Hello Scott,

    The MultiSelect is a block-level element, which causes any following content to fall on a new line.

    You can use the following CSS rule to change the default behavior:

    #addRule-div .k-multiselect
    {
        display: inline-lock;
        vertical-align: top;
    }


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Scott Marx
    Scott Marx avatar
    38 posts
    Member since:
    Apr 2010

    Posted 26 Aug 2013 Link to this post

    Thank you for the quick post, but unfortunately that didn't work.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 28 Aug 2013 Link to this post

    Hi Scott,

    One letter is missing, sorry about that.

    display: inline-block;

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready