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

Cannot create simple login form with Kendo Mobile

4 Answers 751 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Volodymyr Oliinyk
Top achievements
Rank 1
Volodymyr Oliinyk asked on 28 Mar 2012, 11:27 AM
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>
    <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>
    <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>
    </div>
</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

Sort by
0
Dimo
Telerik team
answered on 28 Mar 2012, 12:10 PM
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!
0
Josh
Top achievements
Rank 1
answered on 04 Apr 2012, 08:21 PM
this fixed my issue! great work guys!
0
Thomas
Top achievements
Rank 1
answered on 05 Apr 2012, 01:52 PM
I got a simular error.
When I use the css from the final release, all my input-fields disappear and the layout is corrupted.
As soon, as I'm using the css-Files posted in this threat, everything works fine again.
Anyway, this isn't a good feeling, cause actually I want to use the css from the final release and not the one posted in a thread.

What about future release? Will this issue be solved and why do the input-fields vanish?
0
Kamen Bundev
Telerik team
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!
Tags
General Discussions
Asked by
Volodymyr Oliinyk
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Josh
Top achievements
Rank 1
Thomas
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or