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

css, html, kendo-ui

Solution

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;
            }

Problem

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...

Original source