TabStrip Text on Android

[Jack]

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

thanks

[Kamen Bundev]

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

[Jack]

Thank you very much..  :)

[Afxe]

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]

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

[Afxe]

Thank you for the really fast respond!!

[Michael]

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]

Ignore previous post, it works on the actual device but it doesn't show up on chrome or the simulator.

[Thomas Kam]

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]

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

[Bob]

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]

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