Date Picker modale scrollt die Seite hinunter

Ich benutze Material Design und mit seiner Datumsauswahl. Wenn die Datumsauswahl erscheint, scrollt die Seite nach unten. Wie kann ich den Datumsauswahlmodus laden, ohne dass die Seite herunterscrollt?Date Picker modale scrollt die Seite hinunter

<input id="client-edit-birth-date" type="text" class="datepicker validate"> 
    $('.datepicker').pickadate({ 
selectMonths: true, // Creates a dropdown to control month 
selectYears: 15, // Creates a dropdown of 15 years to control year, 
container: 'body' 
});

Quelle

2016-07-26 baig772

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css"> 
<script type="text/javascript"> 
$(function() { 
    $('.date-picker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy', 
     onClose: function(dateText, inst) { 
      $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1)); 
     } 
    }); 
}); 
</script> 
<style> 
.ui-datepicker-calendar { 
    display: none; 
    } 
</style> 
</head> 
<body> 
    <label for="startDate">Date :</label> 
    <input name="startDate" id="startDate" class="date-picker" /> 
</body> 
</html>

demo http://jsfiddle.net/DBpJe/5106/

Quelle

2016-07-26 12:32:33

Ich mache es durch beforeShow Funktion von picker Verwendung:

$('.datepicker').datepicker({ 
    ... 
    beforeShow: function(input, inst) 
      { 
       inst.dpDiv.css({position: 'absolute'}); 
      } 
    ... 
});

Dort können Sie die Position der Datumsauswahl des Dialogs gesetzt. Sie müssen experimentieren, um herauszufinden, welche Art von CSS-Parameter in Ihrem Fall/Seitenlayout besser geeignet wäre.

Quelle

2016-07-26 13:20:48

Date Picker modale scrollt die Seite hinunter

Antwort

Verwandte Themen