Hi - there is a cosmetic problem that the user can scroll the entire view (the layout?) while view transitions are happening. To see this happen - I started with the very useful example from Todd here: http://www.kendoui.com/forums/mobile/split-view/phone-vs-tablet.aspx#2192778 and put it in an absolutely minimal PhoneGap/Cordova boilerplate project by removing all their default .js and .css and replacing the bulk part of their index.html with the example above...
The only real changes I made to the "stock" Cordova setup are to remove the width=device-width and height=device-height from the meta tags because it appears to break view/tabstrip heights :( I also put in the fix from Kamen found here: http://www.kendoui.com/forums/mobile/tabstrip/tabstrip-ios-disappearing.aspx#1972286 or else I lost a few millimeters of the screen. So far so good.
Ok - so get that up and running. Then tap/click the one of the tab buttons and while the new screen is sliding in, tap/click again and drag up or down on the tab button you just clicked. The entire screen will scroll up or down. Looks really weird - doesn't break anything that I can tell :)
I'm using Kendo version: kendoui.complete.2012.3.1114.commercial with PhoneGap/Cordova (v2.2.0) on iOS (6.0 if it matters) for both the simulator and the device itself.
Here is my index.html just for completeness sake.
Cheers,
Stephen
The only real changes I made to the "stock" Cordova setup are to remove the width=device-width and height=device-height from the meta tags because it appears to break view/tabstrip heights :( I also put in the fix from Kamen found here: http://www.kendoui.com/forums/mobile/tabstrip/tabstrip-ios-disappearing.aspx#1972286 or else I lost a few millimeters of the screen. So far so good.
Ok - so get that up and running. Then tap/click the one of the tab buttons and while the new screen is sliding in, tap/click again and drag up or down on the tab button you just clicked. The entire screen will scroll up or down. Looks really weird - doesn't break anything that I can tell :)
I'm using Kendo version: kendoui.complete.2012.3.1114.commercial with PhoneGap/Cordova (v2.2.0) on iOS (6.0 if it matters) for both the simulator and the device itself.
Here is my index.html just for completeness sake.
Cheers,
Stephen
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
/>
<
meta
name
=
"format-detection"
content
=
"telephone=no"
/>
<
meta
name
=
"viewport"
content
=
"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
/>
<
link
rel
=
"stylesheet"
href
=
"styles/kendo.mobile.all.min.css"
/>
<
style
>
body, html {
margin:0;
height:100%;
width:100%;
}
</
style
>
<
title
>Hello World</
title
>
</
head
>
<
body
>
<
div
id
=
"tabletApp"
style
=
"display:none;"
>
<
div
data-role
=
"splitview"
>
<
div
data-role
=
"pane"
id
=
"left"
data-layout
=
"leftLayout"
>
<
div
data-role
=
"view"
>
LEFT
</
div
>
<
div
data-role
=
"layout"
data-id
=
"leftLayout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
TEST APP
</
div
>
</
div
>
</
div
>
</
div
>
<
div
data-role
=
"pane"
id
=
"right"
data-layout
=
"rightLayout"
>
<
div
data-role
=
"view"
>
RIGHT
</
div
>
<
div
data-role
=
"layout"
data-id
=
"rightLayout"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
</
div
>
<
div
id
=
"phoneApp"
style
=
"display:none;"
>
<
div
data-role
=
"view"
>
<
h1
>Phone Home</
h1
>
</
div
>
<
div
data-role
=
"view"
id
=
"about"
>
<
h1
>Phone About</
h1
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"phoneDefault"
>
<
div
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
Phone App
</
div
>
</
div
>
<!--Content-->
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
""
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"#about"
data-icon
=
"info"
>About</
a
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
"cordova-2.2.0.js"
></
script
>
<!-- This combo fixes the status bar height offset... Taken from Telerik forum answer post. -->
<
script
>
if (typeof window._nativeReady === "undefined")
window._nativeReady = true;
</
script
>
<
script
src
=
"js/jquery.min.js"
></
script
>
<
script
src
=
"js/kendo.all.min.js"
></
script
>
<
script
>
$(function() {
var app,
//Must be mobile and tablet
isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
appElement = null,
appLayout = null;
console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);
appElement = (isTablet) ? $("#tabletApp") : $("#phoneApp");
appLayout = (isTablet) ? null : "phoneDefault";
app = new kendo.mobile.Application(appElement, {
layout: appLayout,
transition: 'slide'
});
//Adjust visibility of proper app container
appElement.show();
});
</
script
>
</
body
>
</
html
>