jQuery Date picker bewegt sich nicht mit der Seite scrollen
Ich bin mit der standard-jQuery-UI-datepicker -, Aber wenn ich die Seite scrollen über den Datum-picker fixiert bleibt . Irgendwelche Ideen wie man dieses Problem lösen ?
Grüße,
Neil
- Ihre hintergrund-Farbe auch in weiß nicht..in schwarz..
- möglich, Duplikat der Wie halten jquery-ui-datepicker-in-place (stick, um den input-regler) beim scrollen?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem, dass der datepicker ist außerhalb die
div
mitoverflow: scroll;
. Wenn der datepicker erzeugt wurde, im inneren des Behälters, würde dies nicht zu einem problem werden.Lösung: http://jsfiddle.net/jbK6a/15/
Legte ich den datepicker hinter dem Eingang mit der
beforeShow
Veranstaltung.Und ich
position: relative;
auf den scrollbaren container, so dass de absolute element hört auf die container.#ui-datepicker-div { top: 0 !important; left: 0 !important; }
zusammen mit derbeforeShow
position der datepicker richtigMit ein wenig Gefummel habe ich es geschafft die folgenden:
http://jsfiddle.net/jbK6a/12/
Mithilfe dieser, der datepicker versteckt sich auf Seite Blättern. Ich glaube, es gibt jQuery-Methoden zur Bestimmung der scroll-position und so mit ein bisschen mehr Gefummel, könnte man dann manuell Bearbeiten die datepicker und aktualisieren Sie Ihre position basierend auf diesem Wert...
UPDATE:
Gerade fummelte ein wenig und bekam: http://jsfiddle.net/jbK6a/18/ die Schriftrollen der datepicker, aber es ist wirklich chaotisch, eine beliebige Anzahl von Dingen kann es brechen vor allem anderen zusammenklappbaren Elementen. Glücklicherweise Sem hat eine weit bessere und sauberere Lösung 🙂
(Dachte, ich möchte hinzufügen mein code trotzdem obwohl)
Um dieses problem zu lösen, die in jQuery-UI-1.11.4 ich Hinzugefügt .bind () - Ereignis das Ende der datepicker-Instanziierung:
In meinem Fall, das "andere-Selektor" wurde $(this).closest('the-date-input-Eltern -'). Der nimmt den einzigen #ui-datepicker-div-box (die jQuery-UI-Plätze am Ende der DOM) und bewegt es an eine Stelle irgendwo anders im Dokument. Dies kann für mehrere datepickers auf der gleichen Seite.
Den anderen-Selektor haben sollte position: relative; gesetzt, so dass die absolut positionierten #ui-datepicker-div-Element wird relativ positioniert, um das neue übergeordnete Objekt. Einmal so, es scrollt nur in Ordnung.
Diese Lösung war die einfachste Lösung für dieses problem (obwohl es nahm sich viel Zeit und suchen zu diesem Schluss kommen) und erlaubt das datepicker-um korrekt zu funktionieren auf mobilen Geräten und tablets, wo es sonst unbrauchbar.
Nicht finden konnte alle Antworten, die auf diese mithilfe von Bootstrap und datepicker, der hatte ein Problem mit dem datepicker-bleiben an das element beim scrollen im modal-Split. Das war meine Lösung:
Wenn folgende Bootstrap & Datepicker-syntax, das sollte schön spielen.
Einfach zu entfernen Höhe: 100 - % - Regel aus dem html-Selektor. Das problem löst.