C# – Make KendoUI Textboxes of same width

asp.net-mvcccsshtmlkendo-ui

I have the following cshtml Login form: 

<div class="editor-label">
            @Html.LabelFor(model => model.UserEmailAddress)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserEmailAddress, new {@class = "k-textbox", style="width:200px"})
            @Html.ValidationMessageFor(model => model.UserEmailAddress)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.UserPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.UserPassword, new { @class = "k-textbox", style="width:200px" })
            @Html.ValidationMessageFor(model => model.UserPassword)
        </div>

The email address is of typr class k-textbox but the password is text-box single-line password. Therefore both of the have different widths. Even after I tried to specify width and class explicitly. i'm using KendoUI for MVC.
The Output is :
enter image description here

This is the page source: 

 <div class="editor-label">
            <label for="UserEmailAddress">User Name (Email Id)</label>
        </div>
        <div class="editor-field">
            <input class="k-textbox" data-val="true" data-val-regex="E-mail is not valid" data-val-regex-pattern="^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,6}$" data-val-required="The User Name (Email Id) field is required." id="UserEmailAddress" name="UserEmailAddress" type="text" value="" />
            <span class="field-validation-valid" data-valmsg-for="UserEmailAddress" data-valmsg-replace="true"></span>
        </div>

        <div class="editor-label">
            <label for="UserPassword">UserPassword</label>
        </div>
        <div class="editor-field">
            <input class="text-box single-line password" data-val="true" data-val-required="Password required" id="UserPassword" name="UserPassword" type="password" value="" />
            <span class="field-validation-valid" data-valmsg-for="UserPassword" data-valmsg-replace="true"></span>
        </div>

How can these both be made of same class, style and width.

Best Answer

I think that the best solution for your case would be to write your own custom HTML helper, that will allow you to pass additional information to your text box. See this stackoverflow post for instructions.

If you don't want to mess with custom HTML helpers, just write plain HTML code instead:

<div class="editor-field">
    <input style="width:200px;" class="k-textbox single-line password" data-val="true" data-val-required="Password required" id="UserPassword" name="UserPassword" type="password" value="" />
    <span class="field-validation-valid" data-valmsg-for="UserPassword" data-valmsg-replace="true"></span>
</div>
Related Topic