TabStrip Text on Android

12 posts, 0 answers
  1. Jack
    Jack avatar
    4 posts
    Member since:
    Jan 2012

    Posted 08 Feb 2012 Link to this post

    How can I display TabStrip Text on Andoid.. 
    it's work great on IOS.. but android only show icon

    thanks
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 10 Feb 2012 Link to this post

    Hello Jack,

    Android TabStrip doesn't have text labels, only icons. That said, the text is still there, though hidden. You can show it up with this CSS:
    .km-android .km-tabstrip a
    {
        color: #a8a8a8;
    }
    .km-android .km-tabstrip .km-text
    {
        text-indent: 0;
        height: 3.7rem;
        margin-top: -2.5rem;
        padding-top: 1.8rem;
        text-indent: 0;
    }


    All the best,
    Kamen Bundev
    the Telerik team
    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
  4. Jack
    Jack avatar
    4 posts
    Member since:
    Jan 2012

    Posted 10 Feb 2012 Link to this post

    Thank you very much..  :)
  5. Afxe
    Afxe avatar
    10 posts
    Member since:
    Jun 2012

    Posted 24 Jun 2012 Link to this post

    Hey,

    maybe it's a silly question but in my app I have a screen(index.html) with TabStrip and this screen has a button which has link to another screen(second.html) which it has a TabStrip as well. My problem is that I want the first screen to has text on the TabSTrip and the second only icons. Because I use an android I use your code:

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

    The problem is that when I try to group these changes only for the view in the first .html (with id="homeView") with the usual way: 

    #homeView .km-android .km-tabstrip a
    {
        color: #a8a8a8;
    }
    #homeView .km-android .km-tabstrip .km-text
    {
        text-indent: 0;
        height: 3.7rem;
        margin-top: -2.5rem;
        padding-top: 1.8rem;
        text-indent: 0;
    } 

    the text doesn't appear in any view ( index.html and second.html). What am I doing wrong?
  6. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 25 Jun 2012 Link to this post

    Hello Afxe,

    .km-android is set on the Application element (usually the body) and the views reside in it. Having this in mind, your CSS should become:

    .km-android #homeView .km-tabstrip a
    {
        color: #a8a8a8;
    }
    .km-android #homeView .km-tabstrip .km-text
    {
        text-indent: 0;
        height: 3.7rem;
        margin-top: -2.5rem;
        padding-top: 1.8rem;
        text-indent: 0;
    }


    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Afxe
    Afxe avatar
    10 posts
    Member since:
    Jun 2012

    Posted 25 Jun 2012 Link to this post

    Thank you for the really fast respond!!
  8. Michael
    Michael avatar
    21 posts
    Member since:
    Apr 2011

    Posted 04 Oct 2012 Link to this post

    can you please explain where this style information should be placed, I tried adding it to a seperate css file and also to the index.html file, the tab items are now taller so there is now space for text but no text has appeared (on chrome using android user agent and on android sdk simulator) 
  9. Michael
    Michael avatar
    21 posts
    Member since:
    Apr 2011

    Posted 05 Oct 2012 Link to this post

    Ignore previous post, it works on the actual device but it doesn't show up on chrome or the simulator.
  10. Thomas Kam
    Thomas Kam avatar
    1 posts
    Member since:
    Apr 2010

    Posted 02 Nov 2012 Link to this post

    I have a different problem.  The solution suggested by Kamen worked on Emulator, but not on my Galaxy S2 phone.  Looks like the tabstrip height is fixed and doesn't have the room to show the text.

    Anyone else having the same issue?
  11. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Nov 2012 Link to this post

    Hi Thomas,

    Can you describe the issue and provide more information about your setup - version of Kendo UI Mobile you're using, your testing browser/PhoneGap version and possibly sample code?

    All the best,
    Kamen Bundev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Bob
    Bob avatar
    46 posts
    Member since:
    Apr 2012

    Posted 08 Feb 2013 Link to this post

    Hello,

    We are having same problem with displaying tabstrip text on a Samsung GS2 Android.  I am using the css frome the previous post.  The icons are rendering just fine but no text is being rendered.

    Thx...Bob Baldwin
    Trabon Solutions

    Here is the CSS code:

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

    and the tabstrip code is:
    <footer data-role="footer">
    <div data-role="tabstrip">
    @Html.ActionLink("MyProjects", "MyProjects", "Home", new { data_icon = "home" })
    @Html.ActionLink("Logout", "Logout", "Home", new { data_icon = "history" })
    </div>
    </footer>

     

     

  13. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 13 Feb 2013 Link to this post

    Hi Bob,

    With the latest version also add font-size: 1em to .km-text, like this:
    .km-android .km-tabstrip a
    {
        color: #a8a8a8;
    }
    .km-android .km-tabstrip .km-text
    {
        text-indent: 0;
        height: 3.7rem;
        margin-top: -2.5rem;
        padding-top: 1.8rem;
        font-size: 1em;
    }


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