Kendo mobile header

2 posts, 0 answers
  1. Madhab Chandra
    Madhab Chandra avatar
    2 posts
    Member since:
    Dec 2011

    Posted 22 Dec 2011 Link to this post

    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>

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 23 Dec 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top