Das Problem ist ziemlich einfach, obwohl es mir schwer fällt, herauszufinden, wie ich es lösen kann.
Ich verwende einen jQuery-ui-Datepicker zusammen mit einem benutzerdefinierten "ios style on / off toggle". Dieser Schalter verwendet einige absolut positionierte Elemente, die derzeit über meiner Datumsauswahl angezeigt werden.
siehe den hässlichen Kreis am 6. Juli unten ...
Der schmutzige Weg, dies zu tun (zumindest imo), besteht darin, einen Stil in eines meiner Stylesheets zu schreiben, aber ich würde viel lieber Javascript verwenden, wenn der Picker gestartet wird, um dies zu erledigen.
Ich habe es schon versucht
$('.date_field').datepicker();
$('.date_field').datepicker("widget").css({"z-index":100});
und
$('.date_field').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({"z-index":100});
}
});
Es scheint jedoch, dass der Z-Index bei jedem Start des Datepickers überschrieben wird.
Jede Hilfe wird geschätzt!
javascript
jquery
css
jquery-ui
datepicker
Greg Guida
quelle
quelle
style
Tag an den Kopf angehängt. Wenn Sie es nicht nur in CSS verwenden, wird Ihr JS-Code kürzer und sauberer, sondern gilt auch nahtlos für alle Instanzen von Datepickern.style
Tag im Kopf ist etwas näher an dem, wonach ich suche, aber ich möchte wirklich das Stilattribut des Datumsauswahlelements ändern.=]
Antworten:
Ihr JS-Code in der Frage funktioniert nicht, da jQuery das
style
Attribut des Datepicker-Widgets bei jedem Aufruf zurücksetzt .Eine einfache Möglichkeit, seine zu überschreiben
style
,z-index
ist eine!important
CSS-Regel, wie bereits in einer anderen Antwort erwähnt . Eine weitere Antwort schlägt vor, das Eingabeelement selbstposition: relative;
undz-index
das Eingabeelement selbst festzulegen, das automatisch in das Datepicker-Widget kopiert wird.Wenn Sie es jedoch aus irgendeinem Grund wirklich dynamisch einstellen müssen, um Ihrer Seite mehr unnötigen Code hinzuzufügen und zu verarbeiten, können Sie wie gewünscht Folgendes versuchen:
Geige
Ich habe ein verzögertes Funktionsobjekt erstellt, um das
z-index
Widget festzulegen, nachdem es bei jedem Aufruf von der jQuery-Benutzeroberfläche zurückgesetzt wurde. Es sollte Ihren Bedürfnissen genügen.Der CSS-Hack ist IMO weit weniger hässlich. Ich reserviere einen Platz in meinem CSS nur für jQuery UI-Optimierungen (das ist direkt über den IE6-Optimierungen auf meinen Seiten).
quelle
;)
z-index
auf das Eingangs-DOM. Das war das einzige, was für mich funktioniert hat:<input .... style="z-index: 9999;"/>
Es gibt einen eleganteren Weg, dies zu tun. Fügen Sie dieses CSS hinzu:
jQuery setzt den Kalender
z-index
auf 101 (eins mehr als das entsprechende Element). Dasposition
Feld muss seinabsolute
,relative
oderfixed
. jQuery sucht nach dem übergeordneten Element des ersten Elements, das absolut / relativ / fest ist, und nimmt dessen 'z-index
quelle
Sie müssen die
!important
Klausel verwenden, um den Inline-z-index
Wert mithilfe von CSS zu erzwingen .quelle
Dies funktionierte für mich, als ich versuchte, Datepicker in Verbindung mit einem Bootstrap-Modal zu verwenden:
Ändern Sie den Selektor natürlich entsprechend Ihren Anforderungen. Ich habe den "Z-Index" auf 1051 gesetzt, weil der Z-Index für das Bootstrap-Modal auf 1050 gesetzt wurde.
quelle
Um einen Z-Index von 100 zu erhalten, benötigen Sie eine Eingabe mit
z-index:99;
und JQueryUI aktualisiert den Datepickerz-index:100
<input style="z-index:99;">
oder<input class="high-z-index">
und css.high-z-index { z-index: 99; }
Sie können auch den zu erbenden Z-Index angeben, der von Ihrem Dialogfeld erben soll, und dazu führen, dass jQueryUI den Z-Index ordnungsgemäß erkennt.
<input style="z-index:inherit;">
oder<input class="inhert-z-index">
und css.inherit-z-index { z-index: inherit; }
quelle
Der BESTE NATÜRLICHE Weg besteht darin, das Datumsauswahlelement einfach auf eine "Plattform" zu stellen, die eine "relative" Position und einen höheren "Z-Index" hat als das Element, das über Ihrer Kontrolle angezeigt wird ...
quelle
BEST NATURAL way
In meinem Fall hat nichts funktioniert. Ich musste den Z-Index zu dem Eingabetyp hinzufügen, der den Datepicker hat.
quelle
Dies ist für Bootstrap datetimepicker
Wenn sich Ihr Datepicker aufgrund eines Bildlaufs versteckt, wird in Ihrem div verwendet:
in css von ganzen div, die Ihren Datepicker und andere Elemente wie enthalten
quelle