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 .
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!
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.
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.
En ajoutant la classe "ui-front" à l’élément div parent, la saisie semi-automatique s’affiche correctement dans PopUp For Me.
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;
}
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
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
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.
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