虽然我的项目中的验证消息正确定位(仅在右侧)Textbox,Dropdownlist等,但其中一个位于编辑器的左下角,且位置不能改变。那么,有没有办法改变编辑器的验证消息的位置?我只想将验证消息右侧的位置更改为编辑器,而不触及其他控件的位置。任何帮助将不胜感激。
查看:
<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>
答案 0 :(得分:1)
您可以使用Adjacent sibling selector正确定位验证邮件
.editor-field + span {
// proper position
}
甚至:
.editor-field + span.vld.vld-danger {
// proper position
}
答案 1 :(得分:1)
最后,我解决了问题BoltClock's answer。
<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>