Ich habe Probleme mit jquery-ui autocomplete und Schieberegler auf dem gleichen Formular (z-index) bezogen

Question

Ich versuche, eine Webseite mit der jQuery UI Lib zu erstellen. Mein Design verwendet eine jQuery ui Autocomplete auf ein Eingabefeld am oberen Rand eines Formulars. Unmittelbar unter dieser Autovervollständigung Eingabeformular sind einige jQuery Schieberegler. Das Problem ist, dass, wenn die Autovervollständigung Feld füllt die Ergebnisse hinter dem Griff der Schieberegler-Steuerelement angezeigt werden. Dies kommt von der Art und Weise, dass jQuery baut die Schieberegler, die Teile von ihnen haben einen z-index von 3. Der z-index der Dropdown-Teil der jquery autocomplete Kontrolle scheint immer auf 1 gesetzt werden. Ich habe versucht, die Erhöhung der z-index des Eingabeelements, die automatisch abgeschlossen wird, aber das scheint nicht Wirkung der z-index des Elements jquery erstellt für die autocomplete Dropdown. Ich habe auch versucht, mein eigenes Javascript zu schreiben, um das Dropdown-Menü-Element nach Klasse zu erhalten (es ist ein ul) und manuell setzen es z-index. Dies scheint auch nicht zu funktionieren. Ich nehme an, dies bedeutet, irgendwie die jQuery-Code überschreibt die z-Index-Änderung, die ich mache. Dies ist kein Browser-Bug, da es ein Problem auf Firefox, Chrome, Safari und IE ist. Es ist ein Problem mit der tatsächlichen z-index jQuery gibt die Dropdown-Box (UL-Element).

Hat jemand eine Lösung für dieses Problem? Wie geht man in der Regel über fiddling mit Elementen, die jQuery automatisch generiert, um es zu bauen's Kontrollen.

Answer 1

Die Verwendung der Ereignisse "Öffnen" und "Schließen" zum Ändern des Z-Indexes hat bei mir funktioniert:

$( "#tags" ).autocomplete({
  source: availableTags,      
  open: function(event, ui) { $(".ui-slider-handle").css("z-index", -1); },
  close: function(event, ui) { $(".ui-slider-handle").css("z-index", 2); }
});

Sehen Sie eine Demo aquí .

Answer 2

Selon http://bugs.jqueryui.com/ticket/5238 scheint es dafür 2 Lösungen zu geben.

"Das Ändern des z-index auf 3 scheint das Problem vollständig zu beheben."

Sie können dies in Ihrem CSS tun, Sie müssen nur "!important" hinzufügen, um den von der Bibliothek festgelegten Wert zu überschreiben:

ul.ui-autocomplete {
    z-index: 3 !important;
}

Oder: "position:relative bei der Autovervollständigungseingabe setzen, damit .zIndex() den z-Index tatsächlich berechnen kann".

Answer 3

So habe ich den Z-Index für die automatische Vervollständigung eingestellt:

$("#myInputId").autocomplete({
    open: function () { $('.ui-autocomplete').css('z-index', 50); },
    source: function (request, response) {
        $.ajax({
            url: "some url",
            type: "POST",
            dataType: "json",
            data: { /* some code... */ },
            success: function (data) { /* some code... */ }
        })
    }
});