TabStrip Tab icon Zoom

[Siddu]

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>
        </div>
 </footer>

var tabStrip = $("#tabStrip").data("kendoMobileTabStrip");

tabStrip.currentItem();// returns undefined for me.

 And is there possibility to scroll the TabStrip?

[Kamen Bundev]

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;
}

Regards,
Kamen Bundev
the Telerik team