Tab strip text or badge icon not displaing in android with phonegap in kendo mobile ui

2 posts, 0 answers
  1. Karthik
    Karthik avatar
    8 posts
    Member since:
    Sep 2013

    Posted 17 Sep 2013 Link to this post

    This is my index page, i am just trying to use some tabstrip example for my application in phonegap with kendo mobile

    <!DOCTYPE html>
        <title>My App</title>

        <link href="styles/" rel="stylesheet" />
        <link href="customize.kendo.css" rel="stylesheet" />
        <div id="home" data-role="view" data-layout="default">
            Hello Mobile World!

        <section data-role="layout" data-id="default">
            <header data-role="header">
                <div data-role="navbar">My App</div>
            <!--View content will render here-->
            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a href="#home">Home</a>
                    <a href="about.html">About</a>     
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
        var app = new;

    I have use some css which i found in kendo forum to enable the tabstrip title, i have written this css inside my customize.kendo.css

    .km-android .km-tabstrip a
        color: #a8a8a8;

  2. Kiril Nikolov
    Kiril Nikolov avatar
    2543 posts

    Posted 19 Sep 2013 Link to this post

    Hello Karthik,

    The icons are not displayed because you need to specify the data-icon attribute of the link in the TabStrip. You can see a reference with all the icons available with Kendo UI Mobile on the following link:

    As for the text - by default the text is not displayed on Android devices, however you can show it using some custom css styling:

    .km-android #home .km-tabstrip a
     color: #a8a8a8;
    .km-android #home .km-tabstrip .km-text
    height: 3.7rem;
    padding-top: 1.8rem;
    text-indent: 0;

    Please check the following example as a reference (you will need to run it on Android device to see the difference):

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top