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>
    <html>
    <head>
        <title>My App</title>

        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="customize.kendo.css" rel="stylesheet" />
    </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>
                    <a href="about.html">About</a>     
                </div> 
            </footer>
        </section>
    <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>
        <script>
        var app = new kendo.mobile.Application();
    </script>
    </body>
    </html>


    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
    Admin
    Kiril Nikolov avatar
    2566 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:

    http://docs.kendoui.com/getting-started/mobile/icons

    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;
    font-size:0.9em;
    }

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

    http://jsbin.com/owiyAhu/1/edit
     

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top