TabStrip cut off on latest version of PhoneGap in iOS simulator

9 posts, 0 answers
  1. CM
    CM avatar
    12 posts
    Member since:
    Nov 2012

    Posted 03 Jul 2013 Link to this post

    I was going through Burke's example for building your first PhoneGap app with Kendo. After some tweaking to the code (that tutorial doesn't work anymore with the current version of PhoneGap) I got the app to load the Kendo Mobile resources and the TabStrip appears, yet it's cut off. It almost looks like the status bar of the iPhone is pushing the entire window down. 

    Any idea what I can do to fix this? See the attached screen shot.
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 04 Jul 2013 Link to this post

    Hi Christopher,

    I am sorry for the inconvenience caused. I tried reproducing the problem you describe using PhoneGap 2.5.0 and our latest internal build (2013.1.703). The code was something simple:

    <!DOCTYPE html>
    <html>
        <head>
            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <title>Hello World!</title>
        </head>
    <body>
     
        <div data-role="view">
            Hello world! <a data-role="button">Foo</a>
     
            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a data-icon="globe" href="#overview-cities">Cities
                        </a><a data-icon="organize" href="#overview-gallery">Gallery
                        </a><a data-icon="contacts" href="#overview-contacts">Contacts
                    </a><a data-icon="settings" href="#overview-account">My Account</a>
                </div>
            </footer>
        </div>
     
        <script src="cordova-2.5.0.js"></script>
        <script src="kendoui/js/jquery.min.js"></script>
        <script src="kendoui/js/kendo.mobile.min.js"></script>
     
        <script type="text/javascript">
            document.addEventListener("deviceready", function() {
                var app = new kendo.mobile.Application();
            });
        </script>
    </body>
    </html>

    And it worked fine (see attached screenshot). Can you please let me know what else is needed in order for me to reproduce the problem? Thank you in advance.

    Regards,
    Petyo
    Telerik
    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
  4. Dave
    Dave avatar
    12 posts
    Member since:
    Dec 2012

    Posted 20 Jul 2013 Link to this post

    I'm facing the same issue with the latest build.  What was the resolution on this issue?
  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 22 Jul 2013 Link to this post

    Hello Christopher,

    I have tested the Kendo UI Mobile Tabstrip with the latest build and it worked fine. Could you please extract a runnable sample of your project into a jsBin/jsFiddle that we can go through?

    Thank you in advance for your cooperation.
     
    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Gustavo
    Gustavo avatar
    5 posts
    Member since:
    May 2013

    Posted 25 Jul 2013 Link to this post

    Hi,

    Did you resolve this issue? 
    I have the same problem.

    Thanks
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 26 Jul 2013 Link to this post

    Hi Gustavo,

    We can't reproduce this issue on our side, can you extract a sample page which demonstrates the issue? Thank you in advance.

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Gustavo
    Gustavo avatar
    5 posts
    Member since:
    May 2013

    Posted 26 Jul 2013 Link to this post

    Hi,

    Ok this is what I am using:

    PhoneGap 3.0.0-0.14.0
    XCode 4.5.2
    Kendo UI Beta v2013.2.716
    jQuery v1.10.1
    IOS Simulator 6.0

    Steps to reproduce:

    1. Download PhoneGap, and install
    2. Create the app:

    cordova create myTest com.test.myTest MyTest

    3. Add ios:

    cordova platform add ios

    4. Open project in XCode and replace index.html contents with the following:

    01.<!DOCTYPE html>
    02.<!--
    03. Licensed to the Apache Software Foundation (ASF) under one
    04. or more contributor license agreements.  See the NOTICE file
    05. distributed with this work for additional information
    06. regarding copyright ownership.  The ASF licenses this file
    07. to you under the Apache License, Version 2.0 (the
    08. "License"); you may not use this file except in compliance
    09. with the License.  You may obtain a copy of the License at
    10.  
    12.  
    13. Unless required by applicable law or agreed to in writing,
    14. software distributed under the License is distributed on an
    15. "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
    16. KIND, either express or implied.  See the License for the
    17. specific language governing permissions and limitations
    18. under the License.
    19. -->
    20.<html>
    21.    <head>
    22.        <meta charset="utf-8" />
    23.        <meta name="format-detection" content="telephone=no" />
    24.        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    25.        <link rel="stylesheet" type="text/css" href="css/index.css" />
    26.         
    27.         
    28.        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    29.         
    30.         
    31.        <title>Hello World</title>
    32.    </head>
    33.    <body>
    34.        <div data-role="view"
    35.            data-layout="controller-layout">
    36.            First
    37.        </div>
    38.         
    39.        <div id="second"
    40.            data-role="view"
    41.            data-layout="controller-layout">
    42.            Second
    43.        </div>
    44.         
    45.         
    46.         
    47.         
    48.         
    49.        <!--  -------------------------------- LAYOUT ---------------------------------------------  -->
    50.        <div data-role="layout" data-id="controller-layout">
    51.            <header data-role="header">
    52.                <div data-role="navbar">
    53.                    <span data-role="view-title"></span>
    54.                </div>
    55.            </header>
    56.             
    57.            <div data-role="footer">
    58.                <div data-role="tabstrip">
    59.                    <a href="#first" data-icon="search">Search</a>
    60.                    <a href="#second" data-icon="home" >Remote</a>
    61.                </div>
    62.            </div>
    63.        </div>
    64.         
    65.         
    66.         
    67.        <script type="text/javascript" src="cordova.js"></script>
    68.        <script type="text/javascript" src="js/index.js"></script>
    69.        <script type="text/javascript" src="js/jquery.js"></script>
    70.        <script type="text/javascript" src="js/kendo.mobile.min.js"></script>
    71.        <script src="http://192.168.0.112:8080/target/target-script-min.js"></script>
    72.         
    73.        <script type="text/javascript">
    74.            $(document).ready(function() {
    75.                var kendoApp = new kendo.mobile.Application(document.body);
    76.            });
    77.            </script>
    78.    </body>
    79.</html>
    5. Make sure you add JQuery and Kendo script files in "js" folder, as well as kendo stylesheets in "Styles" folder.

    The screenshot attached shows what I see.

    I appreciate your help.



    Thanks
  9. Gustavo
    Gustavo avatar
    5 posts
    Member since:
    May 2013

    Posted 26 Jul 2013 Link to this post

     Hi,

    SOLUTION:

    It turns out that the problem is with the meta tag in the index.html for height. The original file has 

    height=device-height,
    Removing that attribute from the meta tag, and only leaving the attribute for "width" solves the cut off issue. It also solves Portrait / Landscape orientation issues.

    Thanks
  10. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 30 Jul 2013 Link to this post

    Hello Gustavo,

    Yes, height=device-height (combined with width=device-width) is a bad idea in most devices (except in old BlackBerries). In any way, the whole meta tag is redundant, as Kendo UI Mobile sets it properly (it also may be a problem in WP8, where changes to meta tags at runtime are not taken into account).

    Regards,
    Kamen Bundev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready