jquery-ui datepicker changer z-index

Question

Le problème est assez simple bien que je vais avoir un moment difficile de déterminer exactement comment le résoudre.

Je suis à l'aide de jQuery-ui datepicker avec une mesure "ios style on/off toggle". Cette bascule utilise certains éléments en position absolue qui sont actuellement sur le haut de mon sélecteur de date.

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

la sale façon de le faire (au moins omi) est d'écrire d'un style dans un de mes feuilles de style, mais je préfère utiliser du javascript lorsque le sélecteur de lance de ce fait obtenir.

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 écrasés à chaque fois que le datepicker est lancé.

toute aide est appréciée!

Answer 1

Votre code JS en question ne fonctionne pas parce que jQuery réinitialise l' style de l'attribut de composant chaque fois que vous appelez.

Un moyen facile de remplacer son styles' z-index est avec un !important règle CSS comme déjà mentionné dans une autre réponse. Encore une autre réponse suggère la création d' position: relative; et z-index sur l'élément d'entrée lui-même qui sera automatiquement copié sur le composant.

Mais, comme l'a demandé, si, pour quelque raison que ce soit vous avez vraiment besoin de le définir de manière dynamique, en ajoutant plus de code inutile et 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);
    }
});

Violon

J'ai créé un différé fonction de l'objet pour définir le z-index du widget, après qu'il se réinitialiser ed par l'jQuery UI, chaque fois que vous appelez. Il devrait suffire à vos besoins.

Le CSS hack est beaucoup moins laid de l'OMI, je me réserve un espace dans mon CSS de jQuery UI réglages (c'est juste au-dessus de la IE6 tweaks dans mes pages).

Answer 2

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

Answer 3

Trouvé sur l'un des forums.

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?

Juste résolu mon problème. J'ai ajouté le z-index approprié au champ de saisie et tout a augmenté.