I've been attempting to adjust the placement of the Kendo UI Validator within my project, but modifying the properties in the related kendo CSS files (e.g. display: inline-block;) has not yet resolved the issue. So, how can I shift the position from below to the right of a control as illustrated in the attached diagram? Thank you in advance for your help.
Rendered HTML View:
<label for="Name">Name</label>
<span class="k-widget k-numerictextbox"><span class="k-numeric-wrap k-expand-padding k-state-disabled">
<input type="text" value="" name="Name" maxlength="30" id="Name" data-val-required="Required field"
data-val-regex-pattern="^[a-zA-Z \.X]+$" data-val-regex="Please check the value" data-val-maxlength-max="25"
data-val-maxlength="The field Name must be a string or array type with a maximum length of '25'." data-val="true"
class="letters_onlyk-formatted-value k-input"></span><span data-valmsg-replace="true" data-valmsg-for="Name"
class="field-validation-valid"></span></span>
<span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" data-for="Name"
data-valmsg-for="Name" id="Name_validationMessage" role="alert"><span class="k-icon k-warning"> </span>Required field</span>
CSS Styles:
.k-widget.k-tooltip-validation {
background-color: #FFF4C9;
border-color: #FFE79E;
color: #635145;
}
span.k-tooltip {
border-width: 1px;
display: inline-block;
padding: 2px 5px 1px 6px;
position: static;
}
.k-tooltip {
background-repeat: repeat-x;
border-style: solid;
border-width: 1px;
min-width: 20px;
padding: 4px 5px 4px 6px;
position: absolute;
text-align: center;
z-index: 12000;
}
Razor View:
@using (Html.BeginForm("Create", "Multiplier", FormMethod.Post,
new { id = "addForm", enctype = "multipart/form-data"}))
{
@Html.AntiForgeryToken()
<div class="container">
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<fieldset>
<legend>Person</legend>
<section>
<div class="legend-left">
@Html.ValidationMessageFor(model => model.Term)
<br />
@Html.LabelFor(m => m.Name)
@Html.Kendo().TextBoxFor(m => m.WhoIsOnline)
<br />
//... deleted for brevity
</div>
</section>
</fieldset>
@(Html.Kendo().Button()
.Name("submitbtn")
.HtmlAttributes(new { type = "submit", @class = "k-primary k-button k-button-icontext" })
.Content("Save")
)
</div>
}
Additional Info:
After implementing "@Html.ValidationMessageFor", the validation messages now appear as depicted below: