2013 Q1 Beta Missing Icons in IE10

8 posts, 1 answers
  1. Dan Cornish
    Dan Cornish avatar
    28 posts
    Member since:
    Apr 2010

    Posted 05 Mar 2013 Link to this post

    Greetings,

    I'm seeing tabstrip icons when running my page from within Visual Studio 2012 using IE 10, which is the correct behavior.  However, when running the exact same page (same folder structure and all supporting files) from an IIS web site, the icons disappear.

    What's strange is the icons are only missing when running using IE 10.  When running from Chrome, Safari, mobile Android, etc.. the icons are present (see images).

    How can I get the icons to render properly when running from an IIS web site using IE 10?

    Thanks.  BTW, this is the only issue I've encountered thus far.  The beta code is working great otherwise.  Nice work.
  2. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 05 Mar 2013 Link to this post

    Hi Dan,

    Check the Icons article in our docs about how to serve the font icons from your IIS server with their proper mime type.

    Additionally you may encounter a similar issue if you package your app in PhoneGap or as an HTML5 app. Unfortunately there's no workaround for that case, we are looking into other means to serve the Kendo Mobile icons in WP8 appMode.

    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!
  3. Kendo UI is VS 2017 Ready
  4. Anu
    Anu avatar
    3 posts
    Member since:
    Mar 2013

    Posted 14 Mar 2013 Link to this post

    Hi,

    My app is not showing the data-icon (not custom icon) as well. I have an app using PhoneGap when i run the app IOS and Android the data-icons are not coming. It shows the text but no icons
    My code is 

    Thank you
    <footer data-role="footer">
                <div data-role="tabstrip">
                      <a href="#mydayview" data-icon="favorites">My Day</a>
                      <a href="#taskList" data-icon="about">My Tasks</a>              
                </div>
    </footer>
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 Mar 2013 Link to this post

    Hello Anu,

    I will need a sample page in order to reproduce your issue and be able to help you.

    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!
  6. Anu
    Anu avatar
    3 posts
    Member since:
    Mar 2013

    Posted 14 Mar 2013 Link to this post

    Hi,

    Please see the attached file with code. I also attached an image where my back buton is not rendering properly. Can you please help me with that too.

    Thank you
    <!DOCTYPE html>
    <html>
    <head>
        <title>My App</title>
     
        <link href="kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="kendo.common.min.css" rel="stylesheet" />
        <link href="kendo.default.min.css" rel="stylesheet" />
         
        <script src="kendo.mobile.button.min.js"></script>
        <script src="kendo.mobile.tabstrip.min.js"></script>
         <script src="jquery.min.js"></script>
        <script src="kendo.all.min.js"></script>
         
    </head>
    <body>
     
        <!-- Login View -->
        <div data-role="view" id="loginview" data-layout="loginlayout">
        <ul data-role="listview" data-style="inset">
            <li>
                User Name
                <input type="text" name="userName" id="userName" value=""   placeholder="Enter use name" />
            </li>
            <li>
                Password
                <input type="text" name="password" id="name" value=""  placeholder="Enter password"/>
            </li>
        </ul>
         
        <a href="#mydayview" data-role="button" style="background-color: light blue; width:100px;">Login</a>
         
        </div>
         
        <!-- My Day View -->
        <div data-role="view" data-layout="default" id="mydayview" data-title="My Day">
        My Day
        </div>
         
        <!-- List View -->
        <div data-role="view" id="respondantList" data-layout="default" data-title="Respondent List">
            Respodent list
        </div>
         
         
        <!-- Default Layout -->
        <section data-role="layout" data-id="default">
            <header data-role="header">
             
                <div data-role="navbar">
                    <a data-align="left" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                </div>
            </header>
            <!--View content will render here-->
            <footer data-role="footer">
                <div data-role="tabstrip">
                    <a href="#mydayview" data-icon="favorites">My Day</a>
                    <a href="#respondantList" data-icon="about">List</a>               
                </div>
            </footer>
        </section>
         
        <!-- Login Layout -->
        <section data-role="layout" data-id="loginlayout">
            <header data-role="header">
                <div data-role="navbar">My App</div>
            </header>
            <!--View content will render here-->
             
        </section>
         
     
       <style scoped>
        .km-android .km-tabstrip a
        {
            color: #a8a8a8;
        }
        .km-android .km-tabstrip .km-text
        {
            text-indent: 0;
            height: 3.7rem;
            margin-top: -2.5rem;
            padding-top: 1.8rem;
            text-indent: 0;
            font-size: 1em;
        }
        </style>
     
         
        <script>
        var app = new kendo.mobile.Application(document.body,
        {
    /*
            platform:'android'
        */ 
        });
        </script>
         
     
    </body>
    </html>
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Mar 2013 Link to this post

    Hi Anu,

    Kendo UI Mobile's CSS needs the images folder that resides in the same folder as the kendo.mobile.all.min.css, did you copy it over? This folder contains the 2 needed fonts and the clipping mask for the back button.

    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!
  8. Anu
    Anu avatar
    3 posts
    Member since:
    Mar 2013

    Posted 15 Mar 2013 Link to this post

    Thank you Kamen. Can you also add that point somewhere in your documentation. It is missing that you need to add image folder along with css file.

  9. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 19 Mar 2013 Link to this post

    Hello Anu,

    I've added the question to the Kendo UI Mobile FAQ that will become available with the next release tomorrow.

    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
Kendo UI is VS 2017 Ready