wake-up-neo.net

jquery-ui datepicker ändert den Z-Index

Das Problem ist ziemlich einfach, obwohl es mir schwer fällt, herauszufinden, wie ich es lösen kann.

Ich benutze einen jQuery-ui Datepicker zusammen mit einem benutzerdefinierten "ios style on/off toggle". Dieser Schalter verwendet einige absolut positionierte Elemente, die derzeit über meinem Datumsauswahlfeld angezeigt werden.

siehe den hässlichen Kreis, der den 6. Juli abdeckt ...

enter image description here

der schmutzige Weg, dies zu tun (zumindest imo), besteht darin, einen Stil in eines meiner Stylesheets zu schreiben, aber ich würde lieber etwas Javascript verwenden, wenn der Picker startet, um dies zu erledigen.

Ich habe es schon probiert 

$('.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! 

javascriptjquerycssjquery-uidatepicker
74
Greg Guida

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

Eine einfache Möglichkeit, die z-index-Anweisung von style zu überschreiben, ist eine !important-CSS-Regel, wie bereits in eine andere Antwort erwähnt. Ein weiteres answer schlägt vor, position: relative; und z-index für das Eingabeelement selbst festzulegen, das automatisch in das Datepicker-Widget kopiert wird.

Wenn Sie jedoch, wie gewünscht, aus irgendeinem Grund wirklich dynamisch einstellen müssen, indem Sie mehr unnötigen Code und Verarbeitung zu Ihrer Seite hinzufügen, können Sie 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);
    }
});

Fiddle

Ich habe ein verzögertes Funktionsobjekt erstellt, um den z-index des Widgets festzulegen, nachdem er von der jQuery-Benutzeroberfläche bei jedem Aufruf zurückgesetzt wurde. Es sollte Ihren Bedürfnissen genügen.

Der CSS-Hack ist weit weniger hässlich, ich reserviere einen Platz in meinem CSS nur für jQuery-Benutzeroberflächen-Anpassungen (das ist direkt über den IE6-Anpassungen auf meinen Seiten).

127
Fabrício Matté

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

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

jQuery setzt den z-index des Kalenders auf 101 (eines mehr als das entsprechende Element). Das Feld position muss absolute, relative oder fixed sein. jQuery sucht nach dem übergeordneten Element des ersten Elements, das absolut/relativ/fixed ist, und nimmt seinen 'z-index'

83
Marek Roj

Sie müssen die Klausel !important verwenden, um den Inline-Wert z-index mit CSS zu erzwingen.

.ui-datepicker{z-index: 99 !important};
15
Emanuele Greco

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 natürlich den Selektor, um ihn an Ihre Bedürfnisse anzupassen. Ich habe den "Z-Index" auf 1051 gesetzt, da der Z-Index für den Bootstrap-Modal auf 1050 gesetzt wurde.

4
David Hicks

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

Um einen Z-Index von 100 zu erhalten, benötigen Sie eine Eingabe mit z-index:99; und JQueryUI aktualisiert den Datepicker so, dass er z-index:100 ist.

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

3
Loren

In meinem Fall hat nichts funktioniert. Ich musste den Z-Index zu dem Eingabetyp mit dem Datumsauswahlelement hinzufügen.

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

Dies ist für Bootstrap-Datentimer

Wenn sich Ihr Datepicker wegen Scroll in Ihrer Div-Verwendung versteckt:

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

in css von ganzen div die deinen datepicker und andere gegenstände enthalten wie

.dialogModel{
    overflow-x: visible !important;
    overflow-y: visible !important;
}
0
shubham kumar

Die BEST NATURAL-Methode besteht darin, das Datumsauswahlelement einfach auf eine "Plattform" zu setzen, die eine "relative" Position hat und einen höheren "Z-Index" hat als das Element, das über Ihrer Kontrolle angezeigt wird ...

0
clinton