TabStrip Wrap

8 posts, 1 answers
  1. Dimitar Shishkov
    Dimitar Shishkov avatar
    6 posts
    Member since:
    Mar 2010

    Posted 30 Jan 2012 Link to this post

    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.
  2.
  3. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 31 Jan 2012 Link to this post

    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!
  5. Dimitar Shishkov
    Dimitar Shishkov avatar
    6 posts
    Member since:
    Mar 2010

    Posted 01 Feb 2012 Link to this post

    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!
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 02 Feb 2012 Link to this post

    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!
  9. Ryan
    Ryan avatar
    1 posts
    Member since:
    Feb 2012

    Posted 10 Feb 2012 Link to this post

    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. 
  11. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 10 Feb 2012 Link to this post

    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!
  13. Dan
    Dan avatar
    139 posts
    Member since:
    Feb 2011

    Posted 22 Jun 2012 Link to this post

    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...
  14.
  15. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 23 Jun 2012 Link to this post

    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!
Back to Top