jQuery ui datepicker-Positionierung problem beim scrollen nach unten Webseite
Ich habe eine Webseite mit mehreren Instanzen von jQuery ui datepicker. Meine Webseite zeigt ~80 Datensätze, die erstreckt sich über einen einzigen screenshot.
<% foreach (var record in Model) { %>
<div class="recordname"><%=record.name%></div>
<%=Html.TextBox("DateTimePicker", null, new { @class = "date-pick" } )%>
//<-- additional html here -->
<% } %>
Habe ich die defaults von meinem datepicker wie folgt:
$(".date-pick").each(function() {
$(this).datepicker({
dateFormat: 'dd M yy',
showOn: 'button',
buttonImage: '/Images/datepickericon.png',
buttonImageOnly: true
});
});
Wenn die Seite das erste mal lädt, wenn ich auf alle datepicker-Symbol, das auf dem Bildschirm sichtbar ist (d.h. ohne scrollen), dann wird der datepicker erscheint als erwartet.
Jedoch, wenn ich nach unten scrollen die Seite, und klicken Sie dann auf ein datepicker-Symbol der datepicker nicht in der Bildschirm-Fenster, sondern gerendert rechts zurück in der Nähe des oberen Rand des Bildschirms.
Irgendwelche Ideen wie man dieses Problem lösen?
Ich bin mit:
- IE7
- asp.net mvc
- jquery.ui.datepicker.js (UI/API/1.8/Datepicker)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich hatte das gleiche problem auch, bin ich mit dem IE9, sondern in
document.documentElement.scrollTop
ich Bearbeiten Sie die folgende Zeile auf meiner JS-codeDies ist, weil
document.documentElement.scrollTop
gibt 0 zurück, für mich der obige code löst mein problemIch glaube, ich habe es geschafft, zu beheben, mein Problem aber zur gleichen Zeit ich glaube, ich kann aufgedeckt zu haben einen bug (?) in der jquery-ui-datepicker-code.
Bevor ich weiter gehen, dann lassen Sie mich nur sagen, dass ich bin neu in jquery /javascript und würde schätzen, dass jede Eingabe auf der unten.
Zur Erinnerung das problem, ich bin mit asp.net mvc und ich versuche zu zeigen, ~80 datepickers auf einer Seite. Für alle datepicker-in der ersten viewport, der datepickers position in Ordnung. Allerdings, wenn ich nach unten scrollen die datepickers werden immer noch gerendert in der Nähe des oberen Rand des Bildschirms.
Begann ich, um den Quellcode anzuzeigen, und führen Sie einige debugging. Was mir aufgefallen ist, dass das Ausmaß, in dem der datepicker wurde-offset in Richtung der Oberseite des Bildschirms war direkt proportional zu der Menge, durch die ich hatte gescrollt, also mehr scrollen = größer offset.
Die zentrale Frage, in der ich den code gefunden (siehe unten) ist, dass wenn der code funktioniert, wo der datepicker es nicht berücksichtigt, wie weit unten der Bildschirm hat ein Benutzer gescrollt:
In der letzten Zeile der offsetHeight Methode berücksichtigt nicht, wie viel Sie haben nach unten gescrollt auf dem Bildschirm durch.
Wenn Sie ein update von der folgenden Zeile dann löst dies das Problem, das ich angesprochen haben:
Diese ruft einfach die scrollbar-position und fügt Sie zu offsetHeight, um die richtige position zu bringen.
Im Interesse einer vollständigen Offenlegung ich bin mir nicht ganz sicher, warum dies funktioniert und wäre dankbar, einen kleinen Einblick.
Habe ich ~ 3 Tage an diesem Problem und recherchiert im web und das ist die beste, die ich mit oben kommen kann.
Interessanterweise gab es eine ähnliche Abfrage in der jquery-Foren:
Klicken Sie hier zur Ansicht
Lesen des Berichts schien es zu vermuten, dass der Fehler behoben wurde in einer früheren version 1.8?
Dank
Ich hatte auch diese Probleme im IE 9 und kann Ihnen nicht genug danken für Eure kollektive Hilfe. Chrome 22.0.1229.94 m und FF 15.0.1 nicht zeigen dieses Problem für mich.
Versuchte ich zunächst zwingen IE-8-emulation mit einem meta-tag
ohne Erfolg.
Ich dann bearbeitet die jquery.ui.datepicker.js Datei wie vorgeschlagen anpassen der position der Höhe von accounting für das scrollen. Das hat nicht funktioniert entweder.
Schließlich wechselte ich den doctype aus
zu
<!DOCTYPE html>
denen erfolgreich gearbeitet!!
Ich entfernt den meta-tag, die gezwungen IE 8 emulation, behielt aber die änderungen, die ich an den datepicker js-Datei. Mein Erfolg könnte eine Kombination aus bearbeitet js und die änderung in der doctype, oder einfach nur die änderung in der doctype.
Begegnete ich das gleiche problem mit jQuery UI in der version 1.9.2 und IE9.
Scheint es eine Funktion in jQuery UI berechtigt
_checkOffset
soll, kümmern sich um dieses problem. Es funktioniert nicht.Versucht es zu verwenden
$(document).scrollTop()
, die immer scheint zu 0 zurück, im IE9.Ich hatte zu ändern, den Inhalt der Funktion zu verwenden
document.body.scrollTop
statt, wenn die jQuery-Funktion gibt null zurück. So ersetzenmit
überall in
_checkOffset
um zu "beheben" jQuery UI und damit es richtig funktioniert.||
wird die Bewertung auf der rechten Seite des operators in dem Fall, dass$(document).scrollTop()
richtig gibt null zurück.Innerhalb Von Jquery.UI, aktualisieren Sie einfach die _checkOffset-Funktion, so dass viewHeight an, die Hinzugefügt wird, um den offset.oben, vor der offset wird zurückgegeben.
Skript:
datepicker.js
Ich bin mir nicht sicher, ob dies das problem sein würde, aber Sie befestigen den datepicker in einem nicht-standard-Weg. Sie brauchen nicht zu Durchlaufen, mit .jedes();
Außerdem sollten Sie immer setzen Sie einen tag-Namen, die vor einer Klasse-Selektor, Wann immer möglich, denn es beschleunigt den Prozess der Auswahl.
Ich habe das gleiche Problem auf eine app, die ich auf Arbeit bin und eine Lösung gefunden. Der Antrag enthielt nicht einen richtigen doc-type-Spezifikation und alles, was nötig war, um Sie oben auf der Seite.
Hoffe, das hilft.
Hey hier ist ein hack, die können wir verwendet werden, um dieses Problem zu lösen.
Geben einen versuchen es funktionierte für mich 🙂
.ui-datepicker-trigger
sollte ersetzt werden, mit was auch immer Ihre form-widget Verweis, z.B.$("#mywidget").
...$.browser.msie
funktioniert nicht mit neueren jQuery-Versionen - statt, sollte dies funktionieren:navigator.userAgent.match(/msie/i)
document.body.scrollTop
eher als$('html').scrollTop()
. (Mit IE8, möglicherweise auch andere Versionen benötigen diese auch ändern.)zuerst gehen Sie hier und formatieren Sie Ihre js-Datei in Javascript Beautifier
dann gehen Sie auf der Linie 445
Den Datepicker-UI-popup-ziehbar gemacht werden können, indem Sie den folgenden code:
$('#ui-datepicker-div').draggable();
Als diese ID gilt für die div-Komponente erstellt für alle popup-datepickers auf der Seite. Während:
$(".ui-datepicker").draggable()
Gilt für alle datepickers auf einer Seite (egal ob popup oder inline). Indem das panel gezogen werden kann, können Sie in der Regel positionieren Sie den datepicker, wo Sie es möchten ohne zu scrollen.