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

TabStrip Wrap

7 Answers 327 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
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

Sort by
0
Accepted
Kamen Bundev
Telerik team
answered on 31 Jan 2012, 08:48 AM
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
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!
0
Kamen Bundev
Telerik team
answered on 02 Feb 2012, 09:07 AM
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
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
Georgi Tunev
Telerik team
answered on 10 Feb 2012, 10:45 AM
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
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
Kamen Bundev
Telerik team
answered on 23 Jun 2012, 02:45 PM
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
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
Dimitar Shishkov
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Dimitar Shishkov
Top achievements
Rank 1
Ryan
Top achievements
Rank 1
Georgi Tunev
Telerik team
Dan
Top achievements
Rank 1
Share this question
or