This is a migrated thread and some comments may be shown as answers.

[Solved] Cannot create simple login form with Kendo Mobile

4 Answers 838 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Volodymyr Oliinyk asked on 28 Mar 2012, 11:27 AM

KendoApp.zip

Hello,

I have downloaded for testing Kendo Mobile and tried to create a simple login page but failed.
My login page has a very strange layout problem that I can't solve.

Currently I have no idea why it is impossible to create a simple login page with Kendo Mobile or what I'm doing wrong.

The code of the login page is here:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<meta name="viewport" content="width=600, initial-scale=1, maximum-scale=1">

<meta name="apple-mobile-web-app-capable" content="yes"/>

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="Scripts/jquery.json-2.3.min.js"></script>

<script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script>

<script type="text/javascript" src="Scripts/kendo/kendo.mobile.min.js"></script>

<script type="text/javascript" src="Scripts/kendo/plugins/console.js"></script>

<link href="Styles/kendo/kendo.mobile.all.min.css" rel="stylesheet" />

</head>

<body>

<div data-role="view" data-layout="login" data-title="Login">

<div data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

<div data-role="footer">

<div data-role="tabstrip">

<a data-icon="globe" href="#overview-cities">Login</a>

<a data-icon="contacts" href="#overview-contacts">Contacts</a>

</div>

<div id="container">

<span>Main header</span>

<div>

<label for="Username">Username</label>

<input id="Username" name="Username" type="text" />

</div>

<div>

<label for="Password">Password</label>

<input id="Password" name="Password" type="password" />

</div>

<div class="clear">

</div>

<div>

<label for="SelectedLanguage">SelectedLanguage</label>

<select id="SelectedLanguage" name="SelectedLanguage">

<option value="da-DK">dansk (Danmark)</option>

<option value="en-GB">English (United Kingdom)</option>

<option value="fi-FI">suomi (Suomi)</option>

<option value="de-DE">Deutsch (Deutschland)</option>

<option value="nb-NO">norsk, bokmål (Norge)</option>

<option selected="selected" value="ru-RU">русский (Россия)</option>

<option value="sv-SE">svenska (Sverige)</option>

</select>

</div>

<div>

<a input="button" data-role="button">Login</a>

</div>

<script type="text/javascript">

window.kendoMobileApplication = new kendo.mobile.Application();

</script>

</body>

</html>

I have also attached a simple project with this page to illustrate the problem.

Can anybody help me?
Did anyone try to create a mobile login form with Kendo mobile?

Thank you very much.

Vladimir

4 Answers, 1 is accepted

answered on 28 Mar 2012, 12:10 PM

styles.rar

Hello Vladimir,

The problem is caused by position:absolute styles applied to the input elements. This is fixed in the latest internal build, you can use the attached CSS files instead. Alternatively, apply a position:relative style to the <div>s that wrap the labels and inputs.

Regards,
Dimo
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 05 Apr 2012, 04:20 PM

Hi Thomas,

As Dimo mentioned - this is fixed in the latest internal build and you can download the CSS from there instead (though essentially it is the same). You can also wait for the service pack later this month.

The issue is caused by the inputs getting a position: absolute while they shouldn't when placed outside of a mobile list view. As a workaround you can wrap your login form in a list view for now.

Regards,
Kamen Bundev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!