TabStrip wrong active custom icon when using iOS7 Style - on iOS Simulator or iOS Device

2 posts, 0 answers
  1. Gilles
    Gilles avatar
    3 posts
    Member since:
    Feb 2013

    Posted 08 Oct 2013 Link to this post

    Dear Telerik Support

    We are in the upgrading process of adjusting our app to meet the iOS7 style.
    Custom icons are used within TabStrip, with the newest Version v2013.2.1002 we are facing the issue that these icons don't get proper active states.

    To help you, that you can help us I've created a sample so that you can reproduce the issue. Its based on your standard TabStrip example.
    Please note that the problem only appears when using the app on an iPhone or in the iPhone Simulator from Xcode. In Chrome / Ripple everything is fine.

    As you see in the attached screenshot, the active TabStrip element changes the text-color but the icon stays the same. Surprisingly the icon gets colored right when you click on an input box on the according content page. But even then, all custom icons change their color. Using the normal icons from the font like the globe works as it should.

    You find the example and two screenshots which are showing the wrong behavior in the attachments.
    Would be awesome to have a solution or workaround soon.
    Best Regards
  2. Kiril Nikolov
    Kiril Nikolov avatar
    2596 posts

    Posted 09 Oct 2013 Link to this post

    Hi Gilles,

    The difference comes from the fact that when icon is clicked the .km-state-active class is applied, but as the icon is a custom one the color property is not applied. You can fix this, by setting the color yourself using come CSS rules like this:

    .km-state-active .km-icon{
       color:#007aff !important;

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top