jQuery UI autocomplete ne pas s'afficher correctement, z-index problème
je suis en train de mettre en place l'autocomplete de jQuery UI dans la boutique en ligne de mes clients. Le problème est que l'élément dans lequel réside l'autocomplète a un indice z plus élevé que l'indice z de l'autocomplète. J'ai essayé de configurer l'index-z autocomplete manuellement, mais j'ai le sentiment que L'interface utilisateur jQuery l'écrase.
en fait ma question est un duplicata de liste de suggestions autocomplete mauvais z-index, Comment puis-je changer? , mais puisqu'il n'y avait pas réponse j'ai songé à essayer à nouveau.
Toute aide est la bienvenue!
Martijn
11 réponses
utiliser z-index et !important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
en cherchant j'ai trouvé ce sujet (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparemment, la seule façon de changer le style de la boîte autocomplete est de le faire par javascript:
open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
Changer le z-index de la Div parent, la saisie semi-automatique menu aura la div du z-index+1
essayez ceci, vous pouvez manipuler l'index-z sur l'exécution ou initialiser
$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
si vous êtes capable d'appliquer un index en z plus élevé sur la saisie de texte autocomplète, alors c'est la solution à votre problème.
jQuery UI Autocomplete options list calcule sa valeur de l'index z en prenant l'index z du texte auquel il est attaché et ajoute 1 à cette valeur.
ainsi vous pouvez donner un index en z de 999 à l'entrée de texte l'autocomplete aura une valeur d'index en z de 1000
tiré de http://bugs.jqueryui.com/ticket/5489
<input type="text" class="autocomplete" style="z-index:999;" name="foo">
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
essayez quand même dans votre css (avant le chargement du script), pas dans firebug:
.ui-selectmenu-menu {
z-index:100;
}
dans mon cas cela fonctionne et crée z-indexes comme: 100x (par exemple 1002)
aussi jeter un oeil à l'endroit où vous annexez l'article. je suis tombé sur ce problème quand j'ai ajouté l'autocomplete à une div interne, mais quand j'ai ajouté l'autocomplete à la balise de corps, le problème a disparu.
ajouter le texte suivant
.ui-autocomplete
{
z-index:100 !important;
}
en jquery-custom-ui.fichier css (ou le minimisé si vous l'utilisez).
Pour les développeurs qui utilisent encore ce plugin. Essayez ceci:
.acResults
{
z-index:1;
}
pour moi était assez avec z-index:1, Mettez la valeur que vous avez besoin dans votre cas.