Question

我遇到一个问题，其中包含验证结果反馈消息的标签在与kendoDropDownList一起使用时没有对齐（对齐适用于其他形式的输入）。

以下代码会复制最新Chrome和IE 11中的问题。点击“提交”以查看下拉列表中“必填”消息的错位。

您会看到标签没有出现在预期的位置。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <title>Test</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.common-bootstrap.min.css" rel="stylesheet"/>
    <link href="http://kendo.cdn.telerik.com/2015.2.624/styles/kendo.office365.min.css" rel="stylesheet" />
</head>
<body>

    <div class="container" id="Form">

            <div class="form-group">
                <label class="control-label col-md-4" for="first">First</label>
                <div class="input-group col-md-8">
                    <div class="inputGroupContainer">
                        <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input class="k-textbox form-control" data-bind="value: first" id="First" name="first" type="text" required validationmessage="Required" />
                        </div>
                    </div>
                    <label class="k-invalid-msg" data-for="first"></label>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-4" for="second">Second</label>
                <div class="input-group col-md-8">
                    <div class="inputGroupContainer">
                        <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input class="k-dropdown form-control" data-bind="source: authorisorsDataSource, value: second" data-option-label="Option Label" data-role="dropdownlist" data-text-field="secondText" data-value-field="secondId" id="Second" name="seconds" required validationmessage="Required" />
                        <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk required"></span></span>
                        </div>
                    </div>
                    <label class="k-invalid-msg" data-for="second"></label>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-md-4" for="Third">Third</label>
                <div class="input-group col-md-8">
                    <div class="inputGroupContainer">
                        <div class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-import"></i></span>
                        <input class="k-textbox form-control" data-bind="value: third" id="Third" name="third" required type="text" validationmessage="Required">
                        <span class="input-group-addon"><span class="glyphicon glyphicon-asterisk required"></span></span>
                        </div>
                    </div>
                    <label class="k-invalid-msg" data-for="third"></label>
                </div>
            </div>

            <div class="row">
                <div class="col-md-8 text-right pull-right">
                    <button class="btn btn-default" data-bind="click: submit" id="Button">Submit</button>
                </div>
            </div>

    </div>

    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.2.624/js/kendo.ui.core.min.js"></script>

    <script>
    $(document).ready(function() {
        var data = [
            { text: "First", value: "1" },
            { text: "Second", value: "2" },
            { text: "Third", value: "3" }
        ];
        $("#Second").kendoDropDownList({
            animation: false,
            dataValueField: "value",
            dataTextField: "text",
            dataSource: data,
            optionLabel: "Select..."
        });
        $("#Button").kendoButton({
            click: function(e) {
                const validator = $("#Form").kendoValidator().data("kendoValidator");
                e.preventDefault();
                if (validator.validate()) {
                    alert(e.event.target.tagName);
                }
            }
        });
    });
    </script>

</body>
</html>

我该如何解决这个问题？谢谢！

R上。

kendoDropDownList不对齐bootstrap form-group中的验证消息

0 个答案: