2

私のプロジェクトの検証メッセージは、Textbox、Dropdownlist などに対して適切に (ちょうど右側に) 配置されていますが、そのうちの 1 つがエディターの左下に配置されており、位置を変更することはできません。では、エディタの検証メッセージの位置を変更する方法はありますか? 他のコントロールの位置に触れずに、検証メッセージの右側の位置をエディターに変更したいだけです。どんな助けでも大歓迎です。

意見：

<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 に答える