web-dev-qa-db-fra.com

Problème de saisie semi-automatique en mode bootstrap

J'ai un problème d'affichage dans l'auto-complétion jQuery à l'intérieur d'un dialogue de démarrage modal.

Lorsque je fais défiler la souris, les résultats ne restent pas attachés à l’entrée.

Y a-t-il un moyen de résoudre ce problème?

Ici 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 J'ai trouvé le problème:

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

Si le modal a défiler le problème reste!

Ici JsFiddle/1 .

jquerytwitter-bootstrapjquery-ui-autocompletebootstrap-modal
57
Lughino

La position est correcte que ce soit "absolu", alors que vous devez spécifier ceci comme option pour autocomplete :

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

Lorsqu'il peut ancrer la boîte avec les résultats dans n'importe quel élément, je dois empêcher son ancrage dans la classe du formulaire!

Ici est un JsFiddle qui fonctionne! .

94
Lughino

La solution ci-dessus concernant le problème z-index a fonctionné:

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

Assurez-vous de le placer avant votre script .js responsable de la gestion de la logique modal AND à complétion automatique.

42
Tolga Köseoğlu

Consultez la documentation annexeTo : 

Lorsque la valeur est null, les parents du champ de saisie seront vérifié pour une classe de UI-front. Si un élément de la classe ui-front est trouvé, le menu sera ajouté à cet élément.

Donc, ajoutez simplement la classe "ui-front" à l'élément parent et la complétion automatique sera correctement affichée dans le modal.

20
Fernando Pinheiro

En ajoutant la classe "ui-front" à l’élément div parent, la saisie semi-automatique s’affiche correctement dans PopUp For Me.

16
Skarimi

Le problème réel est que Bootstrap Modal a un indice Z supérieur à tout autre élément de la page. Ainsi, l'auto-complétion fonctionne réellement, mais elle est cachée derrière le dialogue.

Vous devez simplement ajouter ceci dans l’un de vos fichiers css ajoutés:

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

Pour résoudre ce problème, je devais simplement modifier le fichier css de jQuery:

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

Note: Ajouter ce css après jquery-ui.css & jquery-ui.js

3
dsandrade

essayez juste d'ajouter ceci:

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

Assurez-vous simplement de donner une valeur élevée à la propriété et DO ADD  

!important

C'est vraiment important. Ce dernier demandera à votre navigateur d’exécuter cette règle d’abord, avant tout autre de la même classe . J'espère que cela vous aidera

3
The Humble Angy

L'ajout de l'option appendTo a résolu ce problème. Il a ajouté le menu à l'un des objets du modèle d'amorçage. 

0
Harish kakani

J'ai résolu par ceci ....

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

La liste d'achèvement de l'extension automatique comprend un ID abrégé comme celui-ci Id = '_completionListElem'

donc vous devez pousser le z-index .. supérieur puis le panneau modal bootstrap;)

J'espère que ça aide

0
user5541665