RadDatePicker w/MetroTouch and jQuery Mobile

4 posts, 0 answers
  1. digitall
    digitall avatar
    169 posts
    Member since:
    Jun 2006

    Posted 03 May 2013 Link to this post

    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:

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


    Any thoughts on how to make this not show?
  2. Marin
    Admin
    Marin avatar
    1045 posts

    Posted 08 May 2013 Link to this post

    Hi,

     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>
    </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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. digitall
    digitall avatar
    169 posts
    Member since:
    Jun 2006

    Posted 08 May 2013 Link to this post

    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?

  5. Marin
    Admin
    Marin avatar
    1045 posts

    Posted 09 May 2013 Link to this post

    Hello,

     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.
Back to Top