CODEWITHSUNDEEP
javascriptandroidhtmlcordovakendo-ui
ryandawkins
ryandawkins

Reputation: 1545

Kendo UI not Displaying Title and View

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

enter image description here

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:

enter image description here

Upvotes: 0

Views: 2882

Answers (1)

Bundyo
Bundyo

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

Related Questions