Ich habe ein Diashow-Div und ein Datepicker-Feld über diesem Div.
Wenn ich in das Datumsauswahlfeld klicke, wird das Datumsauswahlfeld hinter der Diashow div angezeigt.
Und ich habe das Skript wie folgt geschrieben:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js
Daher kann ich den Z-Index von Datepicker in CSS nicht ändern. Der Z-Index der Datumsauswahl, die das Skript generiert, ist 1 und mein Diashow-Div (der auch über googleajaxapi aufgerufen wird) ist 5. Ich denke, ich muss den Z-Index der Datumsauswahl um mehr als 5 erhöhen eine Möglichkeit, es zu erhöhen?
Kann mir jemand helfen?
jquery
jquery-plugins
uidatepicker
Rubinist
quelle
quelle
Antworten:
Fügen Sie den folgenden Stil in das Textelement "Eingabe" ein :
position: relative; z-index: 100000;
.Der Datepicker div übernimmt den Z-Index von der Eingabe, dies funktioniert jedoch nur, wenn die Position relativ ist.
Auf diese Weise müssen Sie kein Javascript über die jQuery-Benutzeroberfläche ändern.
quelle
position : relative
ist nicht akzeptabel und funktioniert in meiner Situation nicht. Die unten stehende Lösung funktioniert einwandfrei.einfach in Ihrem CSS verwenden '
.ui-datepicker{ z-index: 9999 !important;}
' Hier kann 9999 durch einen beliebigen Ebenenwert ersetzt werden, den Ihr Datepicker zur Verfügung haben soll. Weder darf Code kommentiert noch 'position:relative;
' CSS zu Eingabeelementen hinzugefügt werden. Da sich das Erhöhen des Z-Index der Eingabeelemente auf alle Schaltflächen des Eingabetyps auswirkt, ist dies in einigen Fällen möglicherweise nicht erforderlich.quelle
datepicker
eher alsui-datepicker
arbeitete für mich
quelle
Basierend auf der Marksyzm-Antwort hat dies für mich funktioniert:
quelle
Wenn Sie sich Sorgen über unordentliches Markup machen oder diesen Wert nicht in CSS fest codieren möchten, können Sie die Eingabe festlegen, bevor sie angezeigt wird. Etwas wie das:
Beachten Sie, dass Sie die
"position": "relative"
Regel nicht auslassen können , da das Plugin entweder im Inline-Stil für beide Regeln oder für das Stylesheet sucht, aber nicht für beide .Das
dialog("widget")
ist der eigentliche picker, das erscheint.quelle
Ich habe ein Dialogfeld, in dem der Datepicker verwendet wird. Es war immer versteckt. Wenn ich den Z-Index angepasst habe, wurde das Feld in der unteren Form immer im Dialogfeld angezeigt.
Ich habe eine Kombination von Lösungen verwendet, die ich gesehen habe, um das Problem zu beheben.
Die Vorher-Show stellt sicher, dass der Datepicker bei Auswahl immer oben ist, aber der onClose stellt sicher, dass der Z-Index des Felds zurückgesetzt wird, damit er sich nicht mit Dialogen überschneidet, die später mit einem anderen Datepicker geöffnet werden.
quelle
$(this)
statt$('.ui-datepicker')
. Daher wirdz-index:0
anstelle aller Eingaben mit der Klasse ui-datepicker die Einstellung "this input" festgelegt.Ich hatte dieses Problem, das ich mit einem Klick gelöst habe:
quelle
Siehe hier: http://forum.jquery.com/topic/z-index-1-datepicker-1-8
quelle
Ich habe eine Seite, auf der sich der Datepicker über einer Tabletools-Schaltfläche von datatables.net befand. Die Datatables-Schaltflächen hatten einen höheren Z-Index als die einzelnen Datumsauswahl-Datumsschaltflächen. Dank Ronyes Antwort konnte ich dieses Problem mithilfe der folgenden Position lösen: relative; und Z-Index: 10000. Danke!
quelle
Dies passierte mir, als mir das Thema fehlte. Stellen Sie sicher, dass das Thema vorhanden ist, oder laden Sie das Thema erneut herunter, und laden Sie es erneut auf Ihren Server hoch.
quelle
Das hat mein Problem gelöst:
quelle
Tatsächlich können Sie Ihr CSS effektiv hinzufügen,
.ui-datepicker{ z-index: 9999 !important;}
aber Sie können es am Ende der UI-Datepicker-Klasse ändernjquery-ui.css
oderjquery-ui.min.css
hinzufügenz-index: 9999 !important;
. beides funktioniert bei mir (du brauchst nur eins ;-))quelle
Ich hatte auch dieses Problem, da der Datepicker den Z-Index der Eingabe verwendet, habe ich das folgende CSS hinzugefügt
Nehmen Sie einfach die Regel, die für Ihre gilt, entweder nach übergeordneter ID, Klasse oder in meinem Fall nach einem Bootstrap-Dialogfeld, und verwenden Sie deren Eingabegruppe und Formularsteuerung.
quelle
Ich musste
quelle