jQuery Datepicker Position Problem auf FireFox

Question

Irgendwie wird jQuery Datepicker am oberen Rand des Fensters statt unter Eingabefeld auf dem FireFox angezeigt, wenn IE und Chrome gut funktioniert. Es gibt kein zusätzliches CSS oder jQuery - nur Vanille KnockoutJS mit jQuery + jQuery UI und ein Standardthema von dort.

-Code für picker sieht aus wie

$(function() { 
    $("#datepicker").datepicker({ 
     maxDate: "0", 
     changeMonth: true, 
     changeYear: true, 
     showOn: "both", 
     buttonImage: "css/images/calendar.png", 
     buttonImageOnly: true, 
     buttonText: "Select date", 
     yearRange: "-123:+nn" 
    }); 
}); 

Und HTML

<label>DOB:</label><input id="datepicker" data-bind="textInput: birthdate"> 

Beispiel Arbeiten hier http://ouyanews.us/FFtest.html - gerade FF Browserfenster ändern Suffix-Label in die zweite Reihe zu bekommen, dann sollte es Problem neu erstellen.

Irgendwelche Hinweise, was kann falsch sein?

Answer 1

diesen Code Versuchen mit

ersetzen datepicker Code unten

$("#datepicker").datepicker({ 
    maxDate: "0", 
    changeMonth: true, 
    changeYear: true, 
    showOn: "both", 
    buttonImage: "css/images/calendar.png", 
    buttonImageOnly: true, 
    buttonText: "Select date", 
    yearRange: "-123:+nn", 
    beforeShow: function (input, inst) { 
     setTimeout(function() { 
      inst.dpDiv.css({ 
       top: $("#datepicker").offset().top + 25, 
       left: $("#datepicker").offset().left 
      }); 
     }, 0); 
    } 
}); 

In beforeShow Funktion (genannt kurz vor dem Datepicker angezeigt) Sie oben oder linke Position von picker einstellen.

$(function() { 
 
$("#datepicker").datepicker({ 
 
\t maxDate: "0", 
 
\t changeMonth: true, 
 
\t changeYear: true, 
 
\t showOn: "both", 
 
\t buttonImage: "css/images/calendar.png", 
 
\t buttonImageOnly: true, 
 
\t buttonText: "Select date", 
 
\t yearRange: "-123:+nn", 
 
    beforeShow: function (input, inst) { 
 
     setTimeout(function() { 
 
      inst.dpDiv.css({ 
 
       top: $("#datepicker").offset().top+25, 
 
       left: $("#datepicker").offset().left 
 
      }); 
 
     }, 0); 
 
    } 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<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/smoothness/jquery-ui.css"> 
 
<p> 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
</p> 
 
<label>DOB:</label><input id="datepicker" data-bind="textInput: birthdate">

Answer 2

$(".datepicker").datepicker({ 
 
     changeMonth: true, 
 
     changeYear: true, 
 
     dateFormat: 'mm/dd/yy', 
 
     beforeShow: function (input, inst) { 
 
      var rect = input.getBoundingClientRect(); 
 
      setTimeout(function() { 
 
      //Set your datepicker possition 
 
    \t   inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 }); 
 
      }, 0); 
 
     } 
 
    });

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
    <form> 
 
    <input class="datepicker" name="date2" type="text"> 
 
    </form>

Sie können auf die inst.dpDiv mit Anwendung von Custom-Styling Pop-up-Position anpassen. Hoffe das wird dir helfen.

Grüße!