Dimitar Shishkov
Top achievements
Rank 1
Dimitar Shishkov
asked on 31 Jan 2012, 03:18 AM
Hello, I am trying to create a layout which has a TabStrip with 5 items in it. However, when I was testing I noticed that on the Iphone 4, I can only fit 4 items in a TabStrip before the strip wraps and becomes two lines. Is there any way to control this behavior? I would really like to have 5 items on the TabStrip. I don't have this issue on one of my Android phones but that has a much larger screen and higher resolution.
7 Answers, 1 is accepted
0
Accepted
Hi Dimitar,
Kendo Mobile is designed to be easily resizable, this style should be enough to fit 5 items:
.km-ios .km-tabstrip
{
font-size: .8em;
}
.km-ios .km-tabstrip .km-text
{
font-size: 1.3em;
}
Regards,
Kamen Bundev
the Telerik team
Kendo Mobile is designed to be easily resizable, this style should be enough to fit 5 items:
.km-ios .km-tabstrip
{
font-size: .8em;
}
.km-ios .km-tabstrip .km-text
{
font-size: 1.3em;
}
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!
0
Dimitar Shishkov
Top achievements
Rank 1
answered on 02 Feb 2012, 02:58 AM
I actually ended up doing this...
.km-ios .km-tabstrip .km-button {
min-width: 2.0rem;
font-size: .8em;
}
Thanks for sending me on the right path!
.km-ios .km-tabstrip .km-button {
min-width: 2.0rem;
font-size: .8em;
}
Thanks for sending me on the right path!
0
Hi Dimitar,
Note that rem is not supported in iOS 3.x, so if you target it - you can provide em fallback before the rem (or just em). Something like this:
.km-ios .km-tabstrip .km-button {
min-width: 2.0em;
min-width: 2.0rem;
font-size: .8em;
}
All the best,
Kamen Bundev
the Telerik team
Note that rem is not supported in iOS 3.x, so if you target it - you can provide em fallback before the rem (or just em). Something like this:
.km-ios .km-tabstrip .km-button {
min-width: 2.0em;
min-width: 2.0rem;
font-size: .8em;
}
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
Ryan
Top achievements
Rank 1
answered on 10 Feb 2012, 08:13 AM
Can we make the tabstrip scroll-able instead of wrapping tab items to another line? Let's say I'd like to target both Ipad and iphone and the tabstrip would have 6-7 items.
0
Hello Ryan,
Currently the tabstrip does not support that out of the box, but I would suggest to post your request in Kendo's UserVoice so it can be evaluated by the other members of the Kendo UI community. If more people request that feature we will consider it for a future release.
Greetings,
Georgi Tunev
the Telerik team
Currently the tabstrip does not support that out of the box, but I would suggest to post your request in Kendo's UserVoice so it can be evaluated by the other members of the Kendo UI community. If more people request that feature we will consider it for a future release.
Greetings,
Georgi Tunev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Dan
Top achievements
Rank 1
answered on 22 Jun 2012, 07:51 PM
Same exact problem here - that 5th item in the TabStrip wraps on the iPhone. I have tried each of these styles but they don't seem to do anything on my page. Is there a JSFiddle or documentation somewhere that shows this working? I must be doing something wrong, just can't figure out what it is...
0
Hi Dan,
You can try with the Q2 beta released last week - the TabStrip on iPhone as a whole and its icons have been made considerably smaller and you should be able to squeeze 5 buttons on one row.
Greetings,
Kamen Bundev
the Telerik team
You can try with the Q2 beta released last week - the TabStrip on iPhone as a whole and its icons have been made considerably smaller and you should be able to squeeze 5 buttons on one row.
Greetings,
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!