This is a migrated thread and some comments may be shown as answers.

TabStrip Text on Android

11 Answers 249 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Jack
Top achievements
Rank 1
Jack asked on 08 Feb 2012, 02:12 PM
How can I display TabStrip Text on Andoid.. 
it's work great on IOS.. but android only show icon

thanks

11 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 10 Feb 2012, 04:41 PM
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!
0
Jack
Top achievements
Rank 1
answered on 10 Feb 2012, 06:25 PM
Thank you very much..  :)
0
Afxe
Top achievements
Rank 1
answered on 24 Jun 2012, 02:35 PM
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?
0
Kamen Bundev
Telerik team
answered on 25 Jun 2012, 06:52 AM
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!
0
Afxe
Top achievements
Rank 1
answered on 25 Jun 2012, 11:03 AM
Thank you for the really fast respond!!
0
Michael
Top achievements
Rank 1
answered on 04 Oct 2012, 03:24 PM
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) 
0
Michael
Top achievements
Rank 1
answered on 05 Oct 2012, 06:43 AM
Ignore previous post, it works on the actual device but it doesn't show up on chrome or the simulator.
0
Thomas Kam
Top achievements
Rank 1
answered on 03 Nov 2012, 01:59 AM
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?
0
Kamen Bundev
Telerik team
answered on 05 Nov 2012, 08:30 AM
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!
0
Bob
Top achievements
Rank 1
answered on 08 Feb 2013, 07:29 PM
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>

 

 

0
Kamen Bundev
Telerik team
answered on 13 Feb 2013, 03:44 PM
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!
Tags
TabStrip (Mobile)
Asked by
Jack
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Jack
Top achievements
Rank 1
Afxe
Top achievements
Rank 1
Michael
Top achievements
Rank 1
Thomas Kam
Top achievements
Rank 1
Bob
Top achievements
Rank 1
Share this question
or