title: JQueryMobile Datepicker and new framework
body: <p>I was using <a href="http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/" rel="nofollow noreferrer">JQueryMobile's experiment Datepicker</a> for a while and it worked in the old framwork. Yesterday i changed the framework to latest one and found that it breaks the layout of the Datepicker when I click outside.</p>
  
  <p><img src="https://i.stack.imgur.com/KFoNe.png" alt="broken layout"></p>
  
  <p>Has anyone ecountered same problem?? how did you over come it?? it means datepicker will not be supported in the latest framwork??</p>
  
  <p>My code goes as below</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
      &lt;head&gt; 
      &lt;title&gt;Page Title&lt;/title&gt; 
  
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
  
      &lt;link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" /&gt;
      &lt;link rel="stylesheet"  href="jquery.ui.datepicker.mobile.css" /&gt; 
      &lt;script src="jquery-1.7.2.min.js"&gt;&lt;/script&gt;
  
  
  
      &lt;script&gt;
    //reset type=date inputs to text
    $( document ).bind( "mobileinit", function(){
      $.mobile.page.prototype.options.degradeInputs.date = true;
  
    });
  
    $(function() {
          $( "#datepicker" ).datepicker();
      });
  
    &lt;/script&gt;
    &lt;script src="jquery.mobile-1.1.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="jQuery.ui.datepicker.js"&gt;&lt;/script&gt;
      &lt;script src="jquery.ui.datepicker.mobile.js"&gt;&lt;/script&gt;
  &lt;/script&gt;
  &lt;/head&gt; 
  &lt;body&gt; 
  
  &lt;div data-role="page"&gt;
  
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Page Title&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;div data-role="content"&gt;   
          &lt;label for="date"&gt;Date Input:&lt;/label&gt;
          &lt;input type="date" name="date" id="date" value=""  /&gt; 
  
          &lt;div id='datepicker'&gt;&lt;/div&gt;
      &lt;/div&gt;&lt;!-- /content --&gt;
  
      &lt;div data-role="footer"&gt;
          &lt;h4&gt;Page Footer&lt;/h4&gt;
      &lt;/div&gt;&lt;!-- /footer --&gt;
  &lt;/div&gt;&lt;!-- /page --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>