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

TabStrip Tab icon Zoom

1 Answer 119 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Siddu
Top achievements
Rank 1
Siddu asked on 01 Feb 2013, 07:55 AM
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?

1 Answer, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 05 Feb 2013, 10:01 AM
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
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
Siddu
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Share this question
or