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

TabStrip cut off on latest version of PhoneGap in iOS simulator

8 Answers 222 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
CM
Top achievements
Rank 1
CM asked on 04 Jul 2013, 12:19 AM
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.

8 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 04 Jul 2013, 11:00 AM
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!
0
Dave
Top achievements
Rank 1
answered on 20 Jul 2013, 01:39 PM
I'm facing the same issue with the latest build.  What was the resolution on this issue?
0
Kiril Nikolov
Telerik team
answered on 22 Jul 2013, 09:00 AM
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!
0
Gustavo
Top achievements
Rank 1
answered on 26 Jul 2013, 03:11 AM
Hi,

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

Thanks
0
Kamen Bundev
Telerik team
answered on 26 Jul 2013, 08:01 AM
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!
0
Gustavo
Top achievements
Rank 1
answered on 26 Jul 2013, 02:06 PM
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
0
Gustavo
Top achievements
Rank 1
answered on 26 Jul 2013, 09:55 PM
 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
0
Kamen Bundev
Telerik team
answered on 30 Jul 2013, 08:42 AM
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!
Tags
TabStrip (Mobile)
Asked by
CM
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Dave
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Gustavo
Top achievements
Rank 1
Kamen Bundev
Telerik team
Share this question
or