I am using the jQuery Mobile framework (1.3.1) with a mobile site combined with the RadDatePicker (and RadTimePicker) using the MetroTouch skin. While building the site I noticed in IE10 there was an extra textbox and in Chrome there is an extra bar, both showing above the controls. When I did an Inspect Element on the element I found the following HTML:
The problem appears to be with the parent wrapper as the jQuery framework sees this as a normal control and adds some additional styling to it which causes it to be visible, though you can't actually interact with it.
To recreate a sample, just add these four lines to a web form (to setup jQuery mobile) and then add a standard RadDatePicker with the MetroTouch skin (version 2013.1.417.45).
Any thoughts on how to make this not show?
<div id="ctl00_cpContent_rdStartDate_wrapper" class="RadPicker RadPicker_MetroTouch" style="display:inline-block;width:160px;"> <!-- 2013.1.417.45 --><input style="visibility:hidden;display:block;float:right;margin:0 0 -1px -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_cpContent_rdStartDate" name="ctl00$cpContent$rdStartDate" type="text" class="rdfd_ radPreventDecorate" value="" title="Visually hidden input created for functionality purposes." />The problem appears to be with the parent wrapper as the jQuery framework sees this as a normal control and adds some additional styling to it which causes it to be visible, though you can't actually interact with it.
To recreate a sample, just add these four lines to a web form (to setup jQuery mobile) and then add a standard RadDatePicker with the MetroTouch skin (version 2013.1.417.45).
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /><script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>Any thoughts on how to make this not show?
3 Answers, 1 is accepted
0
Hi,
I hope this helps. All the best,
Marin
the Telerik team
You can add data-role = "none" to the elements that you wish to exclude from the jQuery automatic styling. In this case the hidden input element that is picked up by jQuery has the same ID as the RadDatePicker control. So you can use something like the following code to prevent the unwanted behavior:
<head runat="server"> <title></title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(document).ready(function () { //setting data-role:none to the hidden input in RadDatePicker $("#RadDatePicker1").attr("data-role", "none"); }); </script> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script></head>I hope this helps. All the best,
Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
digitall
Top achievements
Rank 1
Rank 1
answered on 08 May 2013, 02:57 PM
I tried this in a couple of different ways, but no luck: added it to my skin file, added it to the bottom of the page, the top of the page and used a combination of $("#<%=rdStartDate.ClientID %>") and $("#rdStartDate") (my control name is rdStartDate, not RadDatePicker1). Any other ideas?
0
Hello,
Marin
the Telerik team
I am attaching a sample runnable page that demonstrates this approach. You can check how it works on your side. Note that the custom code has to be executed before loading the jquery mobile scripts and styles.
Kind regards,Marin
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.