2

尽管我的项目中的验证消息对于 Textbox、Dropdownlist 等的定位正确（就在右侧），但其中一个定位在Editor的左下角，并且位置无法更改。那么，有没有办法改变编辑器验证消息的位置呢？我只想将验证消息右侧的位置更改为编辑器，而不触及其他控件的位置。任何帮助，将不胜感激。

看法：

<script type="text/javascript">
$(function () {     

    $("form").kendoValidator({
            //Hide Kendo validation message and show as tooltip
            errorTemplate: '<span class="vld vld-danger"><span class="k-icon k-warning" title="${message}"></span></span>'
        });

});
</script>


@Html.LabelFor(m => m.Summary)
@Html.TextBoxFor(m => m.Summary)
@Html.ValidationMessageFor(m => m.Summary)

@Html.LabelFor(m => m.Description, new { @class = "editor-label" })
@(Html.Kendo().EditorFor(m=>m.Description)
    .Name("Description")
    .HtmlAttributes(new { @class = "editor-field", required = "required" })           
)
@Html.ValidationMessage("Description")



<style>
/*Hide Kendo validation message and show as tooltip*/
.vld {
    border: 1px solid rgba(0, 0, 0, 0);
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 20px;
    padding: 2px 5px 5px 5px;
    margin-left: 1px;
}
.vld-danger {
    background-color: #F2DEDE;
    border-color: #EED3D7;
    color: #B94A48;
}

.editor-label {
        display: block;
        float: left;
        padding: 0;
        width: 150px;
        margin: 1em 0 0 0;
        padding-right: 14px; 
    }

.editor-field {
    width: auto;
    margin: 0.5em 0 0 0;
    overflow: auto;
    min-height: 2em;
}
</style>
4

2 回答 2

1

您可以使用相邻兄弟选择器来正确定位您的验证消息

.editor-field + span {
    // proper position
}

甚至：

.editor-field + span.vld.vld-danger {
    // proper position
}
于 2015-07-02T15:26:50.490 回答
1

最后，我解决了BoltClock 的回答中指出的问题。

<span class="k-editor-val-message">
@Html.LabelFor(m => m.Description, new { maxlength = 1000, @class = "editor-label" })
@(Html.Kendo().EditorFor(m => m.Description)
    .Name("Description") 
    .HtmlAttributes(new { @class = "editor-field", style = "width:660px; height:140px;", 
         required = "required", data_required_msg="Required field"  })
)
@Html.ValidationMessage("Description")
</span>


<style> 
    .k-editor-val-message > .k-invalid-msg {
        // proper position
    }
</style>
于 2015-07-03T09:24:49.467 回答