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

2013 Q1 Beta Missing Icons in IE10

7 Answers 147 Views

TabStrip (Mobile)

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

Dan Cornish asked on 05 Mar 2013, 03:13 PM

VS-Debugger.JPG

IIS-Web-Site.JPG

IIS-Web-Site-Chrome.JPG

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.

7 Answers, 1 is accepted

Accepted

answered on 14 Mar 2013, 07:20 PM

photo.png

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>

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

<div data-role="view" data-layout="default" id="mydayview" data-title="My Day">

My Day

</div>

<div data-role="view" id="respondantList" data-layout="default" data-title="Respondent List">

Respodent list

</div>

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

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

<section data-role="layout" data-id="loginlayout">

<header data-role="header">

<div data-role="navbar">My App</div>

</header>

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

2013 Q1 Beta Missing Icons in IE10

7 Answers, 1 is accepted