I am trying to provide a hyperlink that will kick off the default email client on the mobile device. The problem is that it takes 10, 20 or even more clicks before it finally opens the email client. This is happening on both iOS and Android. In the browser on a PC it works as expected.
1 thing I noticed is that if I swipe somewhere on the screen and then attempt to click the link it works (more times than not).
1 thing I noticed is that if I swipe somewhere on the screen and then attempt to click the link it works (more times than not).
- What could be going on here?
- Does the link need some type of initialization?
- In Android the corners are not rounded on the switch when I force the "ios" styling. Is there a workaround for this?
<!DOCTYPE html><html><head runat="server"> <meta charset="UTF-8"> <title></title> <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css" rel="stylesheet" /> <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script> </head><body> <div data-role="view" id="orderhistory" data-layout="default" data-before-show="redirectBack" class="hideload"> <ul data-role="listview" data-style="inset" data-type="group" > <li> <ul class="ordULHist"> <li> <a id="ml" data-rel="external" data-role="listview-link" href="mailto:comments@yahoo.com">comments@yahoo.com</a> <li> <li>not rounded in android <input id="chkremember" data-role="switch" /> </li> </ul> </li> </ul> </div> <script type="text/javascript"> var app = new kendo.mobile.Application($(document.body), { platform: { device: "ipad", // Mobile device, can be "ipad", "iphone", "ipod", "android" "fire", "blackberry", "meego" name: "ios", // Mobile OS, can be "ios", "android", "blackberry", "meego" ios: true, // Mobile OS name as a flag majorVersion: 5, // Major OS version minorVersion: "0.0", // Minor OS versions flatVersion: "500", // Flat OS version for easier comparison appMode: false, // Whether running in browser or in AppMode/PhoneGap/Titanium. tablet: "ipad" // If a tablet - tablet name or false for a phone. } }); </script></body></html>4 Answers, 1 is accepted
0
Hi Robert,
The mailto links behaviour is fixed in the latest internal build (2012.3.1210). I tested your code on Android and iOS phones and got everything to work as expected. Please download the internal build and give it a try.
Regarding the switch styling, the only workaround that I can suggest is to force iOS 4 styling (in this version of iOS the switch control is not rounded). I will log this case as a bug and we will do our best to provide a fix in one of our future releases. As a small sign of our appreciation for bringing this to our attention I have updated your Telerik points.
Last but not least, the mark-up of your sample is not valid - the <li> tag is not closed appropriately.
Regards,
Alexander Valchev
the Telerik team
The mailto links behaviour is fixed in the latest internal build (2012.3.1210). I tested your code on Android and iOS phones and got everything to work as expected. Please download the internal build and give it a try.
Regarding the switch styling, the only workaround that I can suggest is to force iOS 4 styling (in this version of iOS the switch control is not rounded). I will log this case as a bug and we will do our best to provide a fix in one of our future releases. As a small sign of our appreciation for bringing this to our attention I have updated your Telerik points.
Last but not least, the mark-up of your sample is not valid - the <li> tag is not closed appropriately.
<li> <a id="ml" data-rel="external" data-role="listview-link" href="mailto:comments@yahoo.com">comments@yahoo.com</a></li>Regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sam
Top achievements
Rank 1
Rank 1
answered on 15 Dec 2013, 06:08 PM
Hopefully this is a good place for this. We have an app that used the following HTML:
<div data-role="navbar">
<a id="btnUploadPics" data-click="uploadPics" data-role="button" data-align="right">Add Photos</a>
</div>
JS:
function uploadPics() {
var sLink = "mailto:test@test.com?subject=test";
window.open(sLink, "emailWindow");
}
This was working fine for the last 2 years until the latest KendoUI update. I've tried
window.location.href = "mailto:test@test.com"
window.location = "mailto:test@test.com"
Nothing seems to work. Now I get a 'null' in the recipient and nothing else. Any help would be appreciated.
<div data-role="navbar">
<a id="btnUploadPics" data-click="uploadPics" data-role="button" data-align="right">Add Photos</a>
</div>
JS:
function uploadPics() {
var sLink = "mailto:test@test.com?subject=test";
window.open(sLink, "emailWindow");
}
This was working fine for the last 2 years until the latest KendoUI update. I've tried
window.location.href = "mailto:test@test.com"
window.location = "mailto:test@test.com"
Nothing seems to work. Now I get a 'null' in the recipient and nothing else. Any help would be appreciated.
0
Hi Sam,
I tried to reproduce the behavior on my side but to no avail. Could you please specify the device and OS version that you are testing with?
In case you are testing on iOS 7 with web app, please have in mind that mailto links are broken due to a bug in the browser. This issue is addressed in iOS 7.0.4.
On a side note, it is recommended to use href="mailto: (....)" attribute and data-rel="external" instead of window.open. On my side window.open does not work at all, even if Kendo UI is not included on the page.
Regards,
Alexander Valchev
Telerik
I tried to reproduce the behavior on my side but to no avail. Could you please specify the device and OS version that you are testing with?
In case you are testing on iOS 7 with web app, please have in mind that mailto links are broken due to a bug in the browser. This issue is addressed in iOS 7.0.4.
On a side note, it is recommended to use href="mailto: (....)" attribute and data-rel="external" instead of window.open. On my side window.open does not work at all, even if Kendo UI is not included on the page.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sam
Top achievements
Rank 1
Rank 1
answered on 18 Dec 2013, 12:46 PM
Thanks for the response. I did get it working with the href=mailto syntax. I needed to pass parameters is the reason I was using window.open but I'm just changing the href attribute on the anchor tag instead.