TabStrip Tab icon Zoom

2 posts, 0 answers
  1. Siddu
    Siddu avatar
    7 posts
    Member since:
    Dec 2012

    Posted 01 Feb 2013 Link to this post

    I have 4 in TabStrip, When a tab is activated, I want to zoom the icon of the Tab. 

    <footer data-role="footer">
            <div data-role="tabstrip" data-id="tabStrip">
                <a href="#home" id="x" data-icon="home">Home</a>
                <a href="#xxx" id="a" data-icon="login">Login</a>
        <a href="#xxx" id="b" data-icon="login">xxxx</a>
                <a href="#xxx" id="c" data-icon="login">xxx</a>

    var tabStrip = $("#tabStrip").data("kendoMobileTabStrip");
    tabStrip.currentItem();// returns undefined for me.
     And is there possibility to scroll the TabStrip?
  2. Kamen Bundev
    Kamen Bundev avatar
    1532 posts

    Posted 05 Feb 2013 Link to this post

    Hello Siddu,

    You can zoom the selected icon in the Mobile TabStrip with CSS only - since it is a font icon, you need only to change the font size. Add the CSS below to check it out:
    .km-tabstrip .km-state-active .km-icon
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
    .km-tabstrip .km-state-active .km-icon:before,
    .km-tabstrip .km-state-active .km-icon:after
        text-align: center;
        top: -.1em;
        font-size: 1.2em;

    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