it-swarm.com.de

Autocomplete-Problem in Bootstrap-Modal

Ich habe ein Anzeigeproblem in der jQuery-Autovervollständigung in einem modalen Dialogfeld-Bootstrap.

Wenn ich mit der Maus scrolle, bleiben die Ergebnisse nicht an die Eingabe gebunden.

Gibt es eine Möglichkeit, dies zu lösen?

Hier JsFiddle :

.ui-autocomplete-input {
  border: none; 
  font-size: 14px;
  width: 300px;
  height: 24px;
  margin-bottom: 5px;
  padding-top: 2px;
  border: 1px solid #DDD !important;
  padding-top: 0px !important;
  z-index: 1511;
  position: relative;
}

EDIT Ich habe das Problem gefunden:

.ui-autocomplete {
  position: fixed;
  .....
}

Wenn der Modal Scroll hat, bleibt das Problem bestehen!

Hier JsFiddle/1 .

57
Lughino

Die Position ist richtig, dass es "absolut" ist, während Sie dies als Option für autocomplete angeben müssen:

$( ".addresspicker" ).autocomplete( "option", "appendTo", ".eventInsForm" );

Wo es die Box mit den Ergebnissen in jedem Element verankern kann, muss ich verhindern, dass es in der Klasse des Formulars verankert wird!

Hier ist ein funktionierendes JsFiddle! .

94
Lughino

Die obige Lösung, die über das z-index-Problem sprach, funktionierte:

.ui-autocomplete { z-index:2147483647; }

Stellen Sie sicher, dass Sie es vor Ihrem .js-Skript ablegen, das für die Verarbeitung der modalen AND-Autovervollständigungslogik verantwortlich ist.

42

Schauen Sie sich die appendTo-Dokumentation an

Wenn der Wert null ist, lautet das übergeordnete Element des Eingabefelds geprüft für eine Klasse von UI-Front. Wenn ein Element mit der Ui-Front-Klasse gefunden wird, wird das Menü an dieses Element angehängt.

Fügen Sie einfach die Klasse "ui-front" zum übergeordneten Element hinzu, und die Autovervollständigung wird im Modal korrekt angezeigt.

20

Wenn Sie dem div-übergeordneten Element die Klasse "ui-front" hinzufügen, wird die Autovervollständigung im PopUp For Me korrekt angezeigt.

16
Skarimi

Das eigentliche Problem ist, dass der Bootstrap-Modal einen höheren Z-Index als jedes andere Element auf der Seite hat. So funktioniert Autovervollständigung tatsächlich - wird jedoch hinter dem Dialog ausgeblendet.

Sie müssen dies nur in einer Ihrer hinzugefügten css-Dateien hinzufügen:

.ui-autocomplete {
  z-index:2147483647;
}
9
Sunil

Um dies zu beheben, musste ich nur die jcssDatei von jQuery ändern:

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

Hinweis: Fügen Sie diese CSS nach jquery-ui.css und jquery-ui.js hinzu

3
dsandrade

versuche einfach folgendes hinzuzufügen:

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

Stellen Sie nur sicher, dass Sie der Immobilie einen hohen Wert geben und DO ADD  

!wichtig

Es ist wirklich wichtig. Letztere wird Ihrem Browser mitteilen, dass er diese Regel zuerst ausführen soll, bevor eine andere Klasse in derselben Klasse vorhanden ist. Hoffe, es hilft

3
The Humble Angy

Durch das Hinzufügen der Option appendTo wurde dieses Problem behoben. Das Menü wurde an eines der Objekte im Bootstrap-Modell angehängt. 

0
Harish kakani

Das habe ich damit gelöst ....

/********************************************************************
*           CORREZIONE PER L'AUTOCOMPLETE EXTENDER di AJAX TOOLKIt  *
********************************************************************/
ul[id*='_completionListElem'] {
    z-index: 215000000 !important;
}

Die Autocomplete-Extender-Beendigungsliste hat eine Kennung wie diese Id = ' _completionListElem '

sie müssen also den Z-Index nach oben schieben.

Ich hoffe es hilft

0
user5541665