google.maps.places.Autocomplete avec un modal dans JHipster

Question

Quelqu'un at-il réussi à obtenir google.maps.places.Autocomplete fonctionnant avec un modal dans Jhipster 4.6.1/angulaire 4.2? Le problème est avec l'affichage des résultats (j'ai vérifié que la requête google ajax retourne correctement la requête), mais l'index z du .modal remplace l'index z du google css pour afficher les résultats => rien n'apparaît .

Cette question a également été abordé ici: how to create google autocomplete in bootstrap modal in angular 2+?

et ici: Google Place Autocomplete not showing in Bootstrap modal

..et j'essayé d'ajouter

.pac-container { 
    z-index: 1054 !important; 
} 

au SCSS des composants, mais il n'a pas d'effet.

Je peux le réparer manuellement via la console en chrome et voir que cela fonctionne.

Cet exemple ci-dessous, montrent est un exemple de travail avec angular2 + ngxbootstrap + modal:
https://embed.plnkr.co/N2Oiu5JzirOfUuA8Te3o/

... mais je ne peux pas (pour la vie de moi) semblent remplacer le .pac-conteneur z-index lorsque la recherche Google est terminée. Tout conseil pour me sortir de la "maison de la douleur" est très apprécié :-)

Answer 1

Ajoutez l'élément style dans le fichier dialog.component.html, puis ajoutez la classe dans le champ de saisie comme indiqué ci-dessous.

<div class="form-group"> 
      <input placeholder="search for location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" class="form-control pac-container" #search > 
     </div>