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

Kendo mobile header

1 Answer 106 Views
Globalization
This is a migrated thread and some comments may be shown as answers.
Madhab Chandra
Top achievements
Rank 1
Madhab Chandra asked on 22 Dec 2011, 05:26 PM
Hi All,

I am working to develop an android app using Ecllipse, PhoneGap and Kendo UI. Expectation is that, when I tap on app icon in the applications list in android device/Emulator it opens the index.html page.

I am trying to code to have the header, content and footer in index.html. I used "data-role"s like header, content and footer.
Now, till I open the page in FF or Chrome in my desktop it shows correctly however when I install the apk in android emulator v2.2, there everything is going wrong like header is placed at the bottom of the display in emulator, header goes to the top. background color is changed to black where actually it's white. header/footer color is changed too.

Any idea to fix this issue?

find the screen shots attached. In both I used index.html.

index.html
---------------------------
<!DOCTYPE HTML>

<html>
<head>
<title>Registration</title>
            <script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>      <script src="jquery.min.js"></script>
        <link rel="stylesheet" href="kendo.mobile.css" />
        <script src="kendo.mobile.min.js"></script>        

</head>

<body>
<div data-role="view" >
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title">Header</span><!-- /view-title -->
<span data-align="left" data-role="button">
<img src="ic_launcher.png" width="40" height="40" />              </span>

                <span class="login" data-align="right" data-role="button">Log In</span><!-- /button -->                  </div><!-- /navbar -->
            </div><!-- /header -->     

           

            <div data-role="content">

               

            </div><!-- /content -->

            <div data-role="footer" >
                <div data-role="tabstrip" style="height: 55px;">
                              Footer
                </div><!-- /tabstrip -->
            </div><!-- /footer --> 
      </div><!-- /view -->

     

    <script>
    $(document).ready(function() {
      $(".login").click(function(){
                     //location.href = 'testredirect.html';                         
               });        
      }); // document.ready ends
      </script>       
    </body>
</html>

1 Answer, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 23 Dec 2011, 08:53 AM
Hi,

The current version of Kendo UI Mobile is only a preview and is not complete yet. Please wait for the first beta which will be ready by the end of January.

Regards,
Atanas Korchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Globalization
Asked by
Madhab Chandra
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Share this question
or