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.
Any idea what I can do to fix this? See the attached screen shot.
8 Answers, 1 is accepted
0
Hi Christopher,
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
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
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
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
Did you resolve this issue?
I have the same problem.
Thanks
0
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
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:
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
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
>
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
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
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,
Thanks
0
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
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!