Datepicker inside dialog box loosing position on mobile

by Bianca Kuehweidner

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<button id="openDialog">
  Click to open Dialog
</button>



<div id="dates" class="hidden">
  <input type="text" class="datepicker" id="date1" />
</div>

CSS

.hidden { display: none; }

JavaScript

var dialog = $("#dates").dialog({
  autoOpen: false,
  height: 'auto', 
  maxHeight: 520,
  width: 370, 
  modal: true,
  position: {
    my: "center",
    at: "center",
    of: window
  },
  open: function (event, ui) {        
    $("#dates").on('scroll', function () {
      var inp = $(this).find('input.hasDatepicker');
      $('#ui-datepicker-div').css('top', inp.offset().top + inp.outerHeight());
    });
  },
  beforeClose: function () {
    $('#dates').off('scroll');
  },
  resizable: false
});


$( document ).ready(function (){

	$("#openDialog").on( "click", function() {
    dialog.dialog( "open" );
  });

  $(".datepicker").datepicker();
  
});
  
  

$(window).resize(function () {

        
    var field = $(document.activeElement);
    if (field.is('.hasDatepicker')) {
        field.datepicker('hide').datepicker('show');
    }

});