11 Answers, 1 is accepted
0
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
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?
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
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
.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?
Anyone else having the same issue?
0
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
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:
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
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
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!