web-dev-qa-db-fra.com

Problème avec les plug-ins jQuery Dialog et Datepicker

J'ai une boîte de dialogue et j'ai un champ de sélection de date dans la boîte de dialogue.

Lorsque j'ouvre la boîte de dialogue et clique dans le champ Datepicker, le panneau Datepicker s'affiche derrière la boîte de dialogue.

J'essaie plus de propriétés: zindex, stack, bgiframe, mais pas le succès.

Quelqu'un peut m'aider?

Tks.

jqueryjquery-ui-dialog
54
Renato Bezerra

Ancienne réponse

z-index (notez le tiret!) est la propriété qui compte. Assurez-vous de le définir plus grand que la boîte de dialogue et assurez-vous de le définir sur l'élément correct. Voici comment nous procédons:

#ui-datepicker-div 
{
 z-index: 1000; /* must be > than popup editor (950) */
}

Changement d'API - 17 avril 201

Dans le fichier CSS du sélecteur de date, recherchez le .ui-datepicker élément et modifiez-le:

.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index: 9999 !important; }

L'utilisation de z-index: 9999! Important; a fonctionné dans Firefox 3.5.9 (Kubuntu).

79
Craig Stuntz

pour jquery-ui-1.8

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003 !important; /* must be > than popup editor (1002) */
    }
</style>

L'important est nécessaire car le sélecteur de date a un élément.style qui définit z-index à 1.

17
Jonatan Littke

Cela a fonctionné pour moi:

.ui-datepicker {
        z-index: 9999 !important;
    }
6
Harmeet Singh

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

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

De cette façon, vous n'avez pas besoin de modifier le javascript à partir de l'interface utilisateur jQuery.

2
Ronye Vernaes

pour jquery-ui-1.7.2

<style type="text/css">
    .ui-datepicker
    {
        z-index: 1003; /* must be > than popup editor (1002) */
    }
</style>
1
yasirmturk

Je l'ai fait fonctionner en appelant

$("#ui-datepicker-div").css("z-index", "1003" );
1
Indra

Réglez cela en haut de votre page. Cela fonctionnera bien:

<style type="text/css">
.ui-datepicker {z-index:10100;}
</style>
1
Revathi

Je suis choqué que:

a) personne ici n'a mentionné une solution programmatique pour définir le z-Index datepicker b) il n'y a pas d'option pour que le jQuery DatePicker passe un z-Index lorsqu'il le lie à un élément.

J'utilise une méthode js pour calculer l'indice le plus élevé. Par défaut, nous ne vérifions que les divs, car ce sont les éléments susceptibles d'obtenir une valeur d'index z et il est compréhensible que ce soit plus rapide que d'analyser chaque élément de la page.

/* Get the highest zindex for elements on the page
*/
function getHighestZIndex(element){
    var index_highest = 0;
    var index_current;
    if(element == undefined){
        element = 'div';
    }
    $(element).each(function(){
        index_current = parseInt($(this).css("z-index"), 10);
        if(index_current > index_highest) {
            index_highest = index_current;
        }
    });
    return index_highest;
}

Parce que nous devons utiliser javascript pour lier le sélecteur de date à un élément, c'est-à-dire $ ('# some_element'). Merci à Ronye Vernaes (dans sa réponse sur cette page) d'avoir souligné que datepicker () récupérera le z-Index de l'élément cible s'il en a un et qu'il est réglé sur position: relative:

$(this.target).datepicker();
var zindex = e.getHighestZIndex();
zindex++;
$(this.target).css('position','relative');
$(this.target).css('z-index',zindex);

this.target est l'élément d'entrée que nous transformons en champ de datepicker. Au moment de la liaison, nous obtenons le z-index le plus élevé de la page et augmentons le z-index de l'élément. Lorsque l'icône de sélection de date est cliquée, elle récupérera cet index z de l'élément d'entrée, car, comme l'a mentionné Ronye Vernaes, la position du style: relative.

Dans cette solution, nous n'essayons pas de deviner quelle sera la valeur d'index z la plus élevée. Nous l'obtenons réellement.

1
Zac Imboden

Depuis la version 1.7.2 de l'interface utilisateur, ui-datepicker-div n'est plus un élément CSS valide. "ui-datepicker" semble être le wrapper le plus à l'extérieur et régler le z-index à 99999 fonctionne correctement pour moi pour autant que je sache

1
matt

Le sélecteur de date définit désormais le z-index contextuel sur un de plus que son champ associé, pour le garder devant ce champ, même si ce champ est lui-même dans une boîte de dialogue contextuelle. Par défaut, le z-index est 0, donc datepicker se termine par 1. Y a-t-il un cas où cela n'affiche pas correctement le datepicker? Message du forum JQuery

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 devrait hériter de votre boîte de dialogue et amener jQueryUI à 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; }

0
Loren

La boîte de dialogue est rendue dans un iframe et est rendue par-dessus tout le reste (y compris les listes déroulantes). Pendant ce temps, le sélecteur de date est rendu en HTML normal et positionné de manière absolue.

Il semble que le sélecteur de date soit rendu absolument par rapport à la page parent au lieu de l'iframe. Avez-vous essayé de placer le calendrier dans la boîte de dialogue comme un blog standard non positionné de manière absolue? Vous pouvez également utiliser des listes déroulantes.

0
Mike Robinson

Solution à la version jquery datepicker 1.8.3, pour changer la valeur de z-index, il n'est pas impossible de changer via css.

Celui-ci fonctionne bien:

jQuery('.ui-datepicker-trigger').click(function() {
        setTimeout(function() {
            jQuery('#ui-datepicker-div').css('z-index', 999);
        }, 500)
    });
0
ignas