Reputation: 1545
I have recently began developing an application and decided KendoUI along with phonegap would be the best solution to our project, however I cannot get KendoUI to display correctly.
I am using a mac to develop the application and when I run the app it displays the code perfectly, I am not sure if this is because it is rendering it as an iOS device and that is why it is displaying correctly, but it does not work with the android device as you can see here: Note this is not just for tablets, I have tried on a Galaxy SII, HTC EVO 4G, and a Nexus 10. All of which produce the same results displayed below.
The problem is it seems the application is ignoring the view and placing the title in the wrong place.
If you need anymore information feel free to ask.. I don't know what else to list.
My file structure for this application is:
/ <--- project root
/assets/
/www/
/css/
/kendo.mobile.all.min.css
/js/
/jquery.min.js
/kendo.all.min.js
/kendo.mobile.min.js
cordova-2.4.0.js
index.html
The tutorial: http://docs.kendoui.com/getting-started/introduction Here is the source code from the tutorial I am following:
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<script src="cordova-2.4.0.js"></script>
<link href="css/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.mobile.min.js" type="text/javascript"></script>
<script>
</script>
</head>
<body>
<div id="home" data-role="view" data-layout="default">
Hello Mobile World!
</div>
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">My App</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip">
<a href="#home">Home</a>
</div>
</footer>
</section>
<script>var app = new kendo.mobile.Application();</script>
</body>
</html>
I also used this tutorial however I do not understand the config file they give the one posted is mine: http://www.adobe.com/devnet/phonegap/articles/getting-started-kendo-ui-mobile-phonegap-build.html
<?xml version="1.0" encoding="utf-8"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<cordova>
<!--
access elements control the Android whitelist.
Domains are assumed blocked unless set otherwise
-->
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
<!-- <access origin="https://example.com" /> allow any secure requests to example.com -->
<!-- <access origin="https://example.com" subdomains="true" /> such as above, but including subdomains, such as www -->
<access origin=".*"/>
<!-- <content src="http://mysite.com/myapp.html" /> for external pages -->
<content src="index.html" />
<log level="DEBUG"/>
<preference name="useBrowserHistory" value="true" />
<preference name="exit-on-suspend" value="false" />
<plugins>
<plugin name="App" value="org.apache.cordova.App"/>
<plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
<plugin name="Device" value="org.apache.cordova.Device"/>
<plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
<plugin name="Compass" value="org.apache.cordova.CompassListener"/>
<plugin name="Media" value="org.apache.cordova.AudioHandler"/>
<plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
<plugin name="Contacts" value="org.apache.cordova.ContactManager"/>
<plugin name="File" value="org.apache.cordova.FileUtils"/>
<plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
<plugin name="Notification" value="org.apache.cordova.Notification"/>
<plugin name="Storage" value="org.apache.cordova.Storage"/>
<plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
<plugin name="Capture" value="org.apache.cordova.Capture"/>
<plugin name="Battery" value="org.apache.cordova.BatteryListener"/>
<plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
<plugin name="Echo" value="org.apache.cordova.Echo" />
<plugin name="Globalization" value="org.apache.cordova.Globalization"/>
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser"/>
</plugins>
</cordova>
Finally my MainActivity:
package com.example.project;
import android.os.Bundle;
import org.apache.cordova.DroidGap;
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Edit: I just tried this solution.. http://docs.kendoui.com/getting-started/mobile/navbar#showing-hidden-view-title however it was unsuccessful in showing the view. I gained this from another question: header and footer not displayed in Kendo UI Mobile PhoneGap Application For Android Here is the new result:
Upvotes: 0
Views: 2882
Reputation: 2173
By default Kendo UI Mobile reverses the View layout on Android in order to get the TabStrip on top of the View. Furthermore the View title is hidden (as it doesn't make sense at the bottom). This can be easily worked around with CSS only:
.km-root .km-android .km-view {
-webkit-box-direction: normal;
-webkit-flex-direction: column;
}
.km-android .km-view-title
{
visibility: visible;
}
Upvotes: 4