Die automatische Vervollständigung von jQuery-UI wird nicht gut angezeigt, Z-Index-Problem

Lesezeit: 4 Minuten

Martijn

Ich implementiere derzeit die automatische Vervollständigung der jQuery-Benutzeroberfläche im Webshop meines Kunden. Das Problem ist: Das Element, in dem sich die Autovervollständigung befindet, hat einen höheren Z-Index als der Z-Index der Autovervollständigung. Ich habe versucht, den Z-Index für die automatische Vervollständigung manuell festzulegen, aber ich habe das Gefühl, dass die jQuery-Benutzeroberfläche dies überschreibt.

Tatsächlich ist meine Frage ein Duplikat der Vorschlagsliste für die automatische Vervollständigung, falscher Z-Index, wie kann ich das ändern?, aber da es keine Antwort gab, dachte ich darüber nach, es noch einmal zu versuchen.

Jede Hilfe ist willkommen!

Martijn

Wird Ihnen das helfen? stackoverflow.com/questions/3549860/…

– Tim

20. Juli 2011 um 12:53 Uhr
Da es keine Codebeispiele gibt, kann ich empfehlen, z-index wie zuvor versucht zu setzen und auf zu setzen !important

– Igor Dymov

20. Juli 2011 um 12:54 Uhr
Ich habe das gleiche Problem, aber der Fehler tritt nur in Chrome auf. Keine Lösung hier scheint zu funktionieren. Kann mir jemand weiterhelfen?

– Nivs

29. Mai 2015 um 6:46 Uhr

Ranch

Verwenden z-index und !important

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

Es ist schon eine Weile her, dass ich diese Frage gepostet habe, aber ich erinnere mich vage, dass Javascript (und damit jQuery) CSS-Eigenschaften überschreiben konnte, obwohl sie als “! wichtig” definiert sind.

– Martijn

21. Mai 2012 um 13:10 Uhr
+1 mit !important in meinem benutzerdefinierten Stylesheet funktionierte auch perfekt für mich und war eine viel bessere Lösung als die Verwendung des open() Callbacks.

– Alex Fairchild

21. März 2013 um 18:30 Uhr
Ich habe diese Antwort zugunsten meiner eigenen akzeptiert, da ich zustimme, dass diese Lösung viel schöner ist. Ich habe die Antwort aber nicht überprüft..

– Martijn

28. Juni 2013 um 7:22 Uhr
Ich bin neu bei jQuery und diese Antwort ist sehr gut. Hat für mich funktioniert. Ich hatte Probleme zu finden, wo .ui-autocomplete war, fand es aber schließlich in jquery-ui.css, gab ihm den Z-Index und Viola, es funktionierte!

– atsurti

29. Mai 2014 um 3:19 Uhr
Gute Antwort. Hat auch bei mir funktioniert. Nur um ein paar Leckerbissen hinzuzufügen. Erstens sind die Autocomplete-Daten in einer Klasse namens ui-autocomplete enthalten, die dann wie oben in Ihrem CSS formatiert werden kann. Zweitens, wenn Sie die automatische Vervollständigung mit Bootstrap verwenden, hat ein Menü, das immer oben ist, einen Z-Index von 1030, also müssen Sie diesen 1031 machen. Großartige Lösung. Danke.

– Randy Greencorn

25. Oktober 2014 um 21:44 Uhr

Bei der Suche fand ich dieses Thema (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Anscheinend besteht die einzige Möglichkeit, den Stil der Autocomplete-Box zu ändern, darin, dies über Javascript zu tun:

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

Warum gibst du false zurück?

– Nojo

8. Februar 2013 um 14:28 Uhr
Das allgemeine Paradigma bei Event-Handlern ist, dass die Rückgabe von false verhindert, dass ein Event explodiert. Allerdings weiß ich nach vier Jahren nicht mehr, ob das in dieser Situation wirklich nötig war.

– Martijn

19. August 2015 um 10:37 Uhr
Danke für die Antwort, auch wenn es Jahre später ist! Tatsächlich ist dies in Ihrem Fall nicht erforderlich und kann bei anderen sogar zu unerwünschtem Verhalten führen. In jedem Fall gibt es für dieses Problem jetzt eine Standardlösung (ui-front Klasse + appendTo Widget-Option): api.jqueryui.com/theming/stacking-elements

– Nojo

19. August 2015 um 15:45 Uhr

Ändern Sie den Z-Index des übergeordneten Div, das Autocomplete-Menü enthält den Z-Index des Div + 1

Die Autovervollständigung wird am Ende des Body-Inhalts hinzugefügt, sodass sie dann den Bodys z-index+1 hat

– Marius

10. Januar 2013 um 15:51 Uhr
@Marius, du kannst die verwenden appendTo Option, um dem Menü-Markup mitzuteilen, wohin es gehen soll, andernfalls können Sie die Klasse hinzufügen ui-front zu einem der übergeordneten Elemente der Eingabe.

– Nojo

8. Februar 2013 um 14:23 Uhr
Noch etwas: Das übergeordnete div muss eine relative Positionierung verwenden (‘position: relative’), sonst kann jQuery seinen z-Index nicht bestimmen (siehe bugs.jqueryui.com/ticket/5489)

– Felix Schwarz

8. März 2013 um 8:31 Uhr

Maseo

Im CSS von jQuery UI:

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

Probieren Sie dies aus, Sie können den Z-Index zur Laufzeit oder beim Initialisieren manipulieren

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

Harry B

Wenn Sie in der Lage sind, einen höheren Z-Index für die Texteingabe mit automatischer Vervollständigung zu erzwingen, ist dies die Lösung für Ihr Problem.

Die Optionsliste für die automatische Vervollständigung der jQuery-Benutzeroberfläche berechnet ihren Z-Indexwert, indem sie den Z-Index der Texteingabe nimmt, an die sie angehängt wird, und 1 zu diesem Wert hinzufügt.

Sie können der Texteingabe also einen Z-Index von 999 geben, die automatische Vervollständigung hat einen Z-Index-Wert von 1000

Genommen von http://bugs.jqueryui.com/ticket/5489

<input type="text" class="autocomplete" style="z-index:999;" name="foo">

Anders

open: function () {
    $(this).autocomplete('widget').zIndex(10);
}

11448900cookie-checkDie automatische Vervollständigung von jQuery-UI wird nicht gut angezeigt, Z-Index-Problem

#Abfrage #Autovervollständigung #Javascript #jquery-ui