web-dev-qa-db-fra.com

jquery-ui datepicker changer z-index

Le problème est assez simple, même si j’ai du mal à comprendre comment le résoudre.

J'utilise un datepicker jQuery-ui avec une "bascule de style ios sur mesure". Cette bascule utilise des éléments parfaitement positionnés qui apparaissent actuellement au-dessus de mon sélecteur de dates.

voir le cercle hideux couvrant le 6 juillet ci-dessous ...

enter image description here

la mauvaise façon de faire cela (au moins en imo) est d’écrire un style dans l’une de mes feuilles de style, mais je préférerais de loin utiliser du javascript lorsque le sélecteur se lance pour le faire.

J'ai déjà essayé 

$('.date_field').datepicker(); 
$('.date_field').datepicker("widget").css({"z-index":100});

et 

$('.date_field').datepicker({
    beforeShow: function(input, inst) { 
        inst.dpDiv.css({"z-index":100});
    }
});

mais il semble que le z-index soit écrasé à chaque lancement du sélecteur de date.

toute aide est appréciée! 

javascriptjquerycssjquery-uidatepicker
74
Greg Guida

Votre code JS dans la question ne fonctionne pas car jQuery réinitialise l'attribut style du widget datepicker à chaque fois que vous l'appelez.

Un moyen simple de remplacer le z-index de sa style consiste à utiliser une règle CSS !important comme déjà mentionné dans une autre réponse . Encore un autre answer suggère de placer position: relative; et z-index sur l’élément d’entrée lui-même, qui sera automatiquement copié dans le widget Datepicker.

Mais, comme demandé, si pour une raison quelconque vous avez vraiment besoin de le définir de manière dynamique, en ajoutant plus de code inutile et en modifiant le traitement de votre page, vous pouvez essayer ceci:

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

J'ai créé un objet fonction différée pour définir le z-index du widget, après sa réinitialisation par l'interface utilisateur jQuery, à chaque fois que vous l'appelez. Cela devrait suffire à vos besoins.

Le hack CSS est beaucoup moins laid IMO, je réserve un espace dans mon CSS uniquement pour les réglages de jQuery UI (juste au-dessus des réglages IE6 de mes pages).

127
Fabrício Matté

Il y a une manière plus élégante de le faire. Ajouter ce CSS:

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

jQuery définira le z-index du calendrier sur 101 (un de plus que l'élément correspondant). Le champ position doit être absolute, relative ou fixed. jQuery recherche le parent du premier élément, qui est absolu/relatif/fixé, et prend son 'z-index

83
Marek Roj

Vous devez utiliser la clause !important pour forcer la valeur z-index en ligne à l'aide de CSS.

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

Cela a fonctionné pour moi lorsque j'essayais d'utiliser Datepicker avec un modal bootstrap:

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

Bien sûr, changez le sélecteur pour répondre à vos propres besoins. J'ai défini le "z-index" sur 1051 parce que le z-index pour le modal bootstrap était défini sur 1050.

4
David Hicks

Le datepicker définit maintenant le z-index contextuel sur un de plus que son champ associé, afin de le conserver devant ce champ, même si ce champ est lui-même dans une boîte de dialogue contextuelle. Par défaut, l'indice-z est 0, donc datepicker se termine par 1. Existe-t-il un cas où cela ne montre pas correctement le datepicker? JQuery Forum Post

Pour obtenir un z-index de 100. Vous avez besoin d'une entrée avec z-index:99; et JQueryUI mettra à jour le sélecteur de date pour qu'il soit z-index:100.

<input style="z-index:99;"> ou <input class="high-z-index"> et css .high-z-index { z-index: 99; }

Vous pouvez également spécifier le z-index à hériter qui doit hériter de votre boîte de dialogue et permettre à jQueryUI de détecter correctement le z-index.

<input style="z-index:inherit;"> ou <input class="inhert-z-index"> et css .inherit-z-index { z-index: inherit; }

3
Loren

Dans mon cas, rien n'a fonctionné. J'avais besoin d'ajouter le z-index au type d'entrée qui a le datepicker.

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

Ceci est pour Bootstrap datetimepicker

Si votre datepicker se cache à cause du défilement apparaît dans votre utilisation div:

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

en css entier div qui contient votre datepicker et autre élément tel que

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

La meilleure méthode naturelle consiste simplement à placer l'élément de sélection de date sur une "plate-forme" qui a une position "relative" et un "indice z" supérieur à celui qui apparaît au-dessus de votre contrôle ...

0
clinton