web-dev-qa-db-fra.com

Numéro z-index du sélecteur de date Jquery

J'ai un div diaporama, et j'ai un champ datepicker au-dessus de ce div.

Lorsque je clique sur le champ datepicker, le panneau datepicker s’affiche derrière le diaporama div.

Et j'ai mis le script comme:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

Je ne peux donc pas changer le z-index de datepicker en CSS. Le z-index de datepicker généré par le script est 1 et mon diaporama div (également appelé par googleajaxapi) z-index est 5. Alors je suppose que je dois augmenter le z-index du sélecteur de date supérieur à 5. Donc y at-il un moyen de l'augmenter?

Quelqu'un peut m'aider?

jqueryjquery-pluginsuidatepicker
102
rubyist

Mettez le style suivant à l'élément de texte 'input': position: relative; z-index: 100000;.

La datepicker div prend le z-index de l'entrée, mais cela ne fonctionne que si la position est relative.

De cette manière, vous n’avez pas à modifier de code javascript à partir de jQuery UI.

170
Ronye Vernaes

simplement dans votre css utiliser '.ui-datepicker{ z-index: 9999 !important;} 'Ici, 9999 peut être remplacé par la valeur de couche souhaitée pour votre sélecteur de date. Aucun code ne doit être commenté, ni l'ajout de 'position:relative; 'css sur les éléments en entrée. En effet, l'augmentation de l'index z des éléments d'entrée aura un effet sur tous les boutons de type d'entrée, ce qui peut ne pas être nécessaire dans certains cas.

153
Aakash Sahai

a travaillé pour moi

.hasDatepicker {
    position: relative;
    z-index: 9999;
}
16
Bashmakov Evgeniy

Basé sur marksyzm, cela a fonctionné pour moi:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});
14
Lucas

En ajoutant à la réponse de Justin, si vous êtes inquiet à propos du balisage désordonné ou si vous ne voulez pas que cette valeur soit codée en dur dans CSS, vous pouvez définir l'entrée avant qu'elle ne soit affichée. Quelque chose comme ça:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Notez que vous ne pouvez pas omettre la règle "position": "relative", Car le plug-in recherche dans le style en ligne les deux règles ou la feuille de style, mais pas les deux.

La dialog("widget") est le sélecteur de date qui apparaît.

4
marksyzm

J'ai une boîte de dialogue qui utilise le datepicker sur elle. C'était toujours caché. Lorsque j'ai ajusté l'index z, le champ de la forme inférieure était toujours visible dans la boîte de dialogue.

J'ai utilisé une combinaison de solutions que j'ai vues pour résoudre le problème.

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

L'option before garantit que datepicker est toujours au premier plan lors de la sélection, mais onClose garantit que l'index z du champ est réinitialisé de sorte qu'il ne chevauche aucune boîte de dialogue ouverte ultérieurement avec un datepicker différent.

4
Harry Binnendyk

J'ai eu ce problème, j'ai résolu en utilisant sur clic:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');
4
Waqleh

Voir ici: http://forum.jquery.com/topic/z-index-1-datepicker-1-8

2
Slawa

En fait, vous pouvez effectivement ajouter dans votre css .ui-datepicker{ z-index: 9999 !important;} mais vous pouvez modifier jquery-ui.css ou jquery-ui.min.css et ajouter à la fin de la classe ui-datepicker z-index: 9999 !important;. les deux choses fonctionnent pour moi (vous n'avez besoin que d'un seul ;-))

1
LeSage Stark

C'est ce qui a résolu mon problème:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});
1
limilou

Cela m'est arrivé quand il me manquait le thème. Assurez-vous que le thème existe, ou peut-être rechargez-le et transférez-le de nouveau sur votre serveur.

1
user725913

J'ai une page où le datepicker était au-dessus d'un bouton de datatables.net tabletools. Les boutons des tables de données avaient un index z supérieur à celui des boutons de date individuels de datepicker. Grâce à la réponse de Ronye, ​​j'ai pu résoudre ce problème en utilisant position: relative; et z-index: 10000. Merci!

1
TMNetworks

J'ai eu ce problème aussi, puisque datepicker utilise le z-index de l'entrée, j'ai ajouté le css suivant

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

Il suffit de prendre la règle qui s’applique à la vôtre, soit par id parent, par classe ou, dans mon cas, par une boîte de dialogue bootstrap), en utilisant leur groupe d’entrée et leur contrôle de formulaire.

0
Jaynesify

J'ai dû

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}
0
iMitwe