Frage Überschreiben Sie jQuery UI Datepicker div beim Laden der ersten Seite merkwürdig sichtbar.


Etwas seltsames im Gange, hier:

Eine Instanz von Datepicker erscheint an einer seltsamen Stelle als einzelner Balken in der oberen linken Ecke von Dies Seite.

Ich benutze den Datepicker und Accordion von jQuery UI auf einer Seite. Im CSS für die Benutzeroberfläche ist die display:none für Datepicker scheint von der display:block für das Akkordeon, zumindest nach Firebug (siehe unten).

Dann, sobald der Trigger Datepicker in der Registerkarte 'Catering / Event Room' angeklickt wurde (klicken Sie auf eine der Schaltflächen, um div mit Datepicker anzuzeigen,) display:none scheint dann zu funktionieren.

So sieht das schlechte Div aus:

bad div

und hier ist das Firebug-Panel:

css


26
2018-01-02 21:55


Ursprung


Antworten:


Ich hatte das gleiche Problem und während einige der oben genannten Lösungen funktionieren, ist die einfachste Lösung von allem, dies zu Ihrem CSS hinzuzufügen:

#ui-datepicker-div {display: none;}

Dies verbirgt im Grunde das neu ausgerichtete Datumsauswahlelement, wenn es nicht an ein vorhandenes unsichtbares Element gebunden werden kann. Sie verstecken es, aber es wird wieder initialisiert, wenn Sie auf ein Element klicken, das den Datumsauswahl-Zeiger anzeigen soll. Nach der Neuinitialisierung wird das Datepicker-Element mit der ID #ui-datepicker-div wird die richtige Position haben.


40
2018-05-02 10:44



Das Problem könnte sein, dass Sie den Datapicker an etwas binden, das nicht sichtbar ist, was die ungerade Positionierung erklären würde (der Versuch, von etwas, das nicht existiert, zu kompensieren, degeneriert zum Offset von (0,0)). Der Datumszähler <div> sollte mindestens eine Tabelle darin haben, vielleicht wird der Datepicker verwirrt und wirft eine Ausnahme, bevor er sich selbst initialisiert. Wenn Sie auf einen der gebundenen Eingänge klicken, initialisiert er sich wahrscheinlich erneut (oder beendet die Initialisierung zumindest ordnungsgemäß) und alles funktioniert danach gut.

Versuchen Sie, den Datepicker zu binden, wenn die Datumseingabe sichtbar wird:

  • Entferne das $(".date_picker").datepicker({ disabled: false });
  • Fügen Sie ein ein id="cater" zu <input type="text" name="cater"/>
  • Anruf $('#cater').datepicker(); wenn die Schaltfläche "Event-Raum reservieren" gedrückt wird.

Wenn das klappt, müsstest du ähnliche Hacks für andere Datepicker hinzufügen. Wenn es nicht funktioniert, dann liegt es wahrscheinlich falsch. Wenn sich meine Vermutung als richtig herausstellt, möchten Sie vielleicht den jQuery-UI-Leuten einen Fehler melden.

Übrigens, in Safari sehe ich nur die ersten beiden Tabs, ich musste zu Firefox wechseln, um den Tab "Catering" zu sehen. Seltsamerweise funktioniert es in Chrome gut. Das hat wahrscheinlich nichts miteinander zu tun, aber ich dachte, ich würde es trotzdem wissen lassen.


4
2018-01-03 02:21



Das Problem liegt an dem Element, für das der Datumsauswahlpunkt gebunden wurde, um noch nicht verfügbar zu sein.

Die Lösung, die ich gefunden habe, war, den Datepicker zu initialisieren, wenn das tatsächliche Element angeklickt wurde und es dann direkt nach der Initialisierung zeigt. Dies stellt sicher, dass das Element verfügbar ist, bevor der Datumsauswahlpunkt an ihn gebunden und initialisiert wurde.

$(function() {
  $(".date_input").click(function() {
    $(this).datepicker();
    $(this).datepicker("show");
  });
});

....

<input type="text" class='date_input' />

3
2017-10-14 12:15



In meinem Fall verwende ich die Sitzung "$ (document) .ready (function () {" von JQuery zu meinen Gunsten.

Da ich eine JavaScript-Datei habe, die auf allen Seiten meines Systems geladen ist, habe ich einfach die folgende Zeile hinzugefügt.

$('#ui-datepicker-div').css('display', 'none');

Für mich scheint es eine klare und elegante Lösung zu sein, weil ich seine Bibliothek nicht ändern musste.

Das Beste von allem, es funktioniert gut in allen Browsern. :)


3
2018-01-21 11:22



Ich hatte ein ähnliches Problem in Chrome und habe es beim Bearbeiten gelöst jquery-ui1.7.2.custom.css

von:

.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }

zu:

.ui-helper-hidden-accessible { position: absolute; left: -9999999px; }

Es gibt wahrscheinlich zu viele Neunen für Chrome.


2
2017-10-03 12:37



Versuchen Sie, den letzten Block an den unteren Rand der Seite zu verschieben (direkt vor dem Schließen des Body-Tags). Sie können mehr darüber lesen, warum Sie dies hier tun möchten:

http://webdevel.blogspot.com/2008/09/place-javascript-code-at-bottom-of-page.html

BTW: Coole Idee für ein Menü. Ich mag das.


1
2018-01-02 23:27



Manchmal hängt es mit dem Z-Index eines anderen Artikels auf der Seite zusammen, der höher ist. Das Setzen des Z-Index auf eine sehr hohe Zahl hat mein Problem gelöst.

#ui-datepicker-div {z-index:11111;}

1
2018-05-04 18:03