Geek Answers Handbook

How to Layout a Simple, Aligned Form Using the Kendo UI Web Interface

Just by getting into the Kendo UI web interface and trying to find the best way to build a simple form. Honestly, I'm a little shocked by the lack of documentation to perform 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 corresponding inputs are in another column, both are correctly aligned, etc.

If you follow the documents to create a simple form, with text box controls and labels, the text box items do not align properly ... even with 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 a k-tag is needed, saw it and thought that I would try ... it won’t help.

I looked through all the style documentation and I don’t see anything there that helps in creating a simple but stylized form. Is the Kendo UI website some kind of fixed or fluid grid to help layout models, or is the user responsible for this? thanks...

+4
source share
2 answers

As far as I know, Kendo doesn’t provide anything for layout purposes (however, Kendo Mobile does). It is up to the user. This is usually as simple as providing a fixed CSS width for your labels, as shown here .

  .k-textbox { width: 11.8em; } label { display: inline-block; width: 90px; text-align: right; }
+4
source

Kendo really does. You just need to use the editor class and editor shortcut in the kendo.common.min.css file

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>
+2
source

More articles:


All Articles