web-dev-qa-db-fra.com

La saisie semi-automatique de jQuery-UI ne s'affiche pas correctement, problème d'index z

Je suis actuellement en train de mettre en œuvre l'auto-complétion de jQuery UI dans la boutique en ligne de mes clients. Le problème est le suivant: l'élément dans lequel réside la saisie semi-automatique a un indice z supérieur à celui de la complétion automatique. J'ai essayé de définir manuellement l'index z à complétion automatique, mais j'ai l'impression que l'interface utilisateur jQuery est en train de l'écraser.

En fait, ma question est une copie de liste de suggestions à complétion automatique incorrecte, z-index incorrect, comment puis-je changer? , mais comme il n'y avait pas de réponse, j'ai pensé à essayer à nouveau.

Toute aide est la bienvenue!

Martijn

javascriptjqueryjquery-uiautocomplete
79
Martijn

Utilisation z-index et !important

.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
98
Ranch

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 de saisie semi-automatique est de le faire via javascript:

    open: function(){
        $(this).autocomplete('widget').css('z-index', 100);
        return false;
    },
58
Martijn

Changer l'index z de la div parente, le menu d'auto-complétion aura l'index z de la div + 1

10
Gratian

Dans le CSS de jQuery UI:

.ui-front { z-index: 9999; }
9
maseo

Essayez ceci, vous pouvez manipuler l'index z au moment de l'exécution ou de l'initialisation

$('#autocomplete').autocomplete({
    open: function(){
        setTimeout(function () {
            $('.ui-autocomplete').css('z-index', 99999999999999);
        }, 0);
    }
});
7
Ipad

Si vous êtes en mesure d'imposer un indice z plus élevé lors de la saisie de texte à remplissage automatique, voici la solution à votre problème.

la liste d'options de saisie semi-automatique de jQuery UI calcule sa valeur d'index z en prenant l'index z de l'entrée de texte à laquelle il est attaché et ajoute 1 à cette valeur.

Donc, vous pouvez donner un index z de 999 à l'entrée de texte, la saisie semi-automatique aura une valeur d'index z de 1000

Tiré de http://bugs.jqueryui.com/ticket/5489

<input type="text" class="autocomplete" style="z-index:999;" name="foo">
2
Harry B
open: function () {
    $(this).autocomplete('widget').zIndex(10);
}
2
raviraj shimpi

Si vous utilisez des boîtes de dialogue jquery-ui, veillez à les initialiser AVANT que la saisie semi-automatique ou la saisie semi-automatique ne soit affichée dans la boîte de dialogue.

Regardez cette réponse interface utilisateur jquery autocomplete dans une boîte de dialogue modale - suggestions ne montrant pas?

0
Andrea Mauro

jetez également un coup d’œil à l’endroit où vous ajoutez l’article. Je suis tombé sur ce problème lorsque j'ai ajouté la saisie semi-automatique à une division interne, mais lorsque j'ai ajouté la saisie semi-automatique à la balise body, le problème a disparu.

0
pgee70