How to layout a simple, aligned form using Kendo UI Web

Question

Just getting into Kendo UI Web, and trying to figure out the best way to layout a simple form. Frankly put, I'm a little shocked at the lack of documentation for performing such a basic task. I am using the kendo.bootstrap theme and trying to figure out how to organize a simple form where the labels are in one column, and the associated inputs are in another column, both being properly aligned etc.

If you follow the docs for creating a simple form, with textbox controls and labels, the text box controls do not align properly...even on their examples.

Using the following code to demonstrate this:

<div>
<ul class="forms">
    <li>
        <label class="k-label">Username:</label>
        <input type="text" class="k-textbox" />         
    </li>
    <li>
        <label class="k-label">Password:</label>
        <input type="text" class="k-textbox" />         
    </li>
</ul>

Not sure if the k-label was needed, saw it and thought I'd try it...doesn't help tho.

I looked over all the styling documentation and I don't see anything there that helps with creating a simple but styled form. Does Kendo UI Web provide any fixed or fluid grid system to help layout forms, or is the user responsible for this? Thx...

Solution 1

As far as I know, Kendo does not provide anything for form layout (however Kendo Mobile does). That would be up to the user. Generally it is a simple as providing a CSS fixed width for your labels, as seen here.

            .k-textbox {
                width: 11.8em;
            }

            label {
                display: inline-block;
                width: 90px;
                text-align: right;
            }

Solution 2

Kendo does provide this. You just have to use the classes editor-label and editor-field in kendo.common.min.css

Example:

<div class="editor-label">
    @Html.LabelFor(model => model.Description)
</div>
<div class="editor-field">
    @Html.TextBoxFor(model => model.Description, new { style="width:500px;" })
    @Html.ValidationMessageFor(model => model.Description)
</div>