TabStrip Text on Android in Kendo UI for jQuery TabStrip (Mobile)

Jack

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

Kamen Bundev

Admin

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!

Jack

4 posts

Member since:
Jan 2012

Posted 10 Feb 2012 Link to this post

Thank you very much.. :)

Afxe

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?

Kamen Bundev

Admin

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!

Afxe

10 posts

Member since:
Jun 2012

Posted 25 Jun 2012 Link to this post

Thank you for the really fast respond!!

Michael

22 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)

Michael

22 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.

Thomas Kam

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?

Kamen Bundev

Admin

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!

Bob

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>

Kamen Bundev

Admin

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!