TabStrip Wrap

[Dimitar Shishkov]

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.

[Kamen Bundev]

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

[Dimitar Shishkov]

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!

[Kamen Bundev]

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

[Ryan]

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. 

[Georgi Tunev]

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

[Dan]

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...

[Kamen Bundev]

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