Make KendoUI Textboxes of same width

Question

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.

Apart from the `k-textbox` class that is defined by Kendo, whats is relevance of the Kendo tag? Have you tried removing the `k-textbox` class to see if that's the source of your problem? Could you also please provide the part of the rendered HTML code corresponding to your login section? — Andrei V, Sep 23 '13 at 09:49
If I make both the textboxes `k-textbox` in firebug both have same width. — Rohit Vipin Mathews, Sep 23 '13 at 10:22
You need to inspect the text boxes better. See the computed values for your text boxes. See also what those "single-line" and "password" classes produce and if they affect the width or not. Observe that your password text box does not have `k-textbox` but `text-box`. You use standard HTML helpers for rendering and not Kendo helpers, so passing the `new {@class = "k-textbox", style="width:200px"}` does not produce anything. — Andrei V, Sep 23 '13 at 10:46
If you're still out there, can we see your Model? Since you're using `EditorFor`, I'm guessing that there might be some Attributes on the properties in your Model that are impacting the `EditorFor` output. — TLS, Jun 04 '14 at 20:37

score 3 · Answer 1 · edited May 23 '17 at 10:32

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>

thienedits · Answer 2 · 2015-04-01T21:59:06.273

Yep I noticed kendo uses the class .text-box and single-line instead of k-textbox on certain input fields. I think it happens when the fields are of a certain type like numbers. You can just restyle the .text-box class to match the .k-texbox.

Update: Actually I was able to add the class k-textbox to the input fields using MVC 5 syntax. Was able to remove classes for .text-box.

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "k-textbox" } })

Update: Just found another way. In the Model I think if you annotate password property with [DataType(DataType.Password)], then in the ~/Views/Shared/EditorTemplates folder there should be a file named Password.cshtml. This is the template that is being used to display when using Html.EditorFor and DataType is Password. The template should add the k-textbox class to make both fields consistent.

@model object 

@Html.TextBoxFor(model => model, new { @class = "k-textbox", type = "password", autocomplete = "off", placeholder = ViewData.ModelMetadata.Watermark })

score 1 · Answer 3 · answered Aug 14 '15 at 09:09

1

Kendo UI overwrites the styles when you use EditorFor. Use TextBoxFor instead.

answered Aug 14 '15 at 09:09

Ziregbe Otee

534
3
9

Make KendoUI Textboxes of same width

3 Answers3