jquery-ui datepicker ändere den z-index

82

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 ...

Geben Sie hier die Bildbeschreibung ein

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!

Greg Guida
quelle
3
Ich halte eine CSS! Wichtige Regel auf CSS Ihrer Seite viel sauberer als Javascript, da z-index ist eine CSS - Eigenschaft und ist dort für das Styling. Wenn ich eine JS-Lösung erstellen müsste, würde ein styleTag 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.
Fabrício Matté
1
Mögliches Duplikat von stackoverflow.com/questions/715677/…
Lance
@Lance kein Betrüger, weil ich frage, wie es dynamisch gemacht werden kann, ohne eine Zeile zum CSS hinzuzufügen
Greg Guida
@ FabrícioMatté Ich denke, ich möchte mein CSS einfach nicht mit einem dummen Override für einen JQuery-UI-Edge-Case durcheinander bringen. Das styleTag im Kopf ist etwas näher an dem, wonach ich suche, aber ich möchte wirklich das Stilattribut des Datumsauswahlelements ändern.
Greg Guida
Ich reserviere bereits einen Platz im unteren Bereich der CSS-Datei nur für jQuery UI-Hacks in jedem Projekt, das ich starte, aber ja, ich habe eine Antwort mit einer reinen jQuery-Lösung eingereicht, in der erklärt wird, warum CSS eine sauberere Lösung ist. Jetzt können Sie auswählen, welche benutzen. =]
Fabrício Matté

Antworten:

142

Ihr JS-Code in der Frage funktioniert nicht, da jQuery das styleAttribut des Datepicker-Widgets bei jedem Aufruf zurücksetzt .

Eine einfache Möglichkeit, seine zu überschreiben style, z-indexist eine !importantCSS-Regel, wie bereits in einer anderen Antwort erwähnt . Eine weitere Antwort schlägt vor, das Eingabeelement selbst position: relative;und z-indexdas 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:

$('.date_field').datepicker({
    //comment the beforeShow handler if you want to see the ugly overlay
    beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }
});

Geige

Ich habe ein verzögertes Funktionsobjekt erstellt, um das z-indexWidget 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).

Fabrício Matté
quelle
5
Darf ich dir nur sagen, wie viel du rockst? Versuchte zuerst eine Vielzahl anderer Dinge. Danke dir!
Bretticus
Vielen Dank für Ihre Antwort. Es funktioniert. Sobald jedoch die Datumsauswahl aktualisiert wird (z. B. wenn Sie den Monat ändern), wird der Z-Index auf den Standardwert zurückgesetzt. Ich denke, diese Antwort würde eine kleine Anpassung erfordern, dh Folgendes hinzufügen onChangeMonthYear: function () {setTimeout (function () {$ ('. ui-datepicker'). css ('z-index', 99999999999999);}, 0); }
Gombo
@Gombo Ich glaube, es ist einfacher, wenn Sie einen der CSS-Ansätze (oben beschrieben als den JS-Ansatz) verwenden, da diese weit weniger hackisch sind. ;)
Fabrício Matté
Zumindest in FF ist die maximale Anzahl 10 Stellen lang, sodass neun Neuner möglicherweise besser sind (obwohl FF gerne fehlerfrei in 2147483647 konvertiert).
Campbeln
+1 für den Hinweis z-indexauf das Eingangs-DOM. Das war das einzige, was für mich funktioniert hat:<input .... style="z-index: 9999;"/>
Sebastian
88

Es gibt einen eleganteren Weg, dies zu tun. Fügen Sie dieses CSS hinzu:

.date_field {position: relative; z-index:100;}

jQuery setzt den Kalender z-indexauf 101 (eins mehr als das entsprechende Element). Das positionFeld muss sein absolute, relativeoder fixed. jQuery sucht nach dem übergeordneten Element des ersten Elements, das absolut / relativ / fest ist, und nimmt dessen 'z-index

Marek Roj
quelle
2
Dies ist definitiv die beste Lösung. +1
Paul Chamberlain
Lief wie am Schnürchen! Vielen Dank
Brando
Perfekt, aber in meinem Fall: .datepicker-dropdown {z-index: 999999! Important;}
ujjaval
Fast perfekt, aber es funktioniert nicht, wenn Sie den Maximalwert von zindex nicht kennen, für den sich der Datepicker selbst auferlegen soll.
MFAL
19

Sie müssen die !importantKlausel verwenden, um den Inline- z-indexWert mithilfe von CSS zu erzwingen .

.ui-datepicker{z-index: 99 !important};
Emanuele Greco
quelle
Tut mir leid, funktioniert bei mir nicht - der Z-Index wird von jQuery für das Element festgelegt, das eine höhere Priorität hat als das! Wichtige
Dylan Hamilton-Foster
1
@ DylanHamilton-Foster bist du sicher? Können Sie bitte ein anderes Tag hinzufügen, z. B. BackgroundColor, um zu sehen, ob der Stil tatsächlich angewendet wird?
Emanuele Greco
7

Dies funktionierte für mich, als ich versuchte, Datepicker in Verbindung mit einem Bootstrap-Modal zu verwenden:

$('input[id^="txtDate"]').datepicker();
$('input[id^="txtDate"]').on('focus', function (e) {
    e.preventDefault();
    $(this).datepicker('show');
    $(this).datepicker('widget').css('z-index', 1051);
});

Ä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.

David Hicks
quelle
5

Der Datepicker setzt den Popup-Z-Index jetzt auf eins mehr als das zugehörige Feld, um ihn vor diesem Feld zu halten, selbst wenn sich dieses Feld selbst in einem Popup-Dialogfeld befindet. Standardmäßig ist der Z-Index 0, sodass der Datepicker mit 1 endet. Gibt es einen Fall, in dem der Datepicker nicht richtig angezeigt wird? JQuery Forum Post

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; }

Loren
quelle
1

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 ...

Clinton
quelle
4
Bitte fügen Sie aussagekräftigen Code hinzu und beschreiben Sie mehr IhreBEST NATURAL way
Peter
1

In meinem Fall hat nichts funktioniert. Ich musste den Z-Index zu dem Eingabetyp hinzufügen, der den Datepicker hat.

<input type="text" class="datepicker form-control" datatype="date" style="z-index: 10000;" id="txtModalDate">
Francisco G.
quelle
0

Dies ist für Bootstrap datetimepicker

Wenn sich Ihr Datepicker aufgrund eines Bildlaufs versteckt, wird in Ihrem div verwendet:

overflow-x: visible !important;
overflow-y: visible !important;

in css von ganzen div, die Ihren Datepicker und andere Elemente wie enthalten

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}
Shubham Kumar
quelle