Comment définir le style de la liste déroulante sur l’API de saisie semi-automatique de Google Adresses?

Nous devons modifier le style de la liste déroulante qui affiche les suggestions de lieu de saisie semi-automatique lors de l’utilisation de l’API de saisie semi-automatique Google Places / Maps.

Est-ce que quelqu’un sait si c’est même possible? Si oui, je suppose que nous avons juste besoin de connaître les noms de classe / ID CSS.

Il y a une capture d’écran du bit auquel je fais référence ici:

“>

Si vous utilisez firebug (comme mentionné dans un commentaire à votre question …), vous voyez que le conteneur avec les résultats de la saisie semi-automatique est un DIV avec la classe “pac-container” et les suggestions sont à l’intérieur de DIV avec la classe ” pac-item “. donc juste style avec CSS.

Ce CSS permettra à la liste déroulante de redimensionner pour correspondre à la largeur des résultats:

 .pac-container, .pac-item { width: inherit !important; } 

Si quelqu’un s’intéresse à la hiérarchie, j’ai pu utiliser Firebug suit:

  

Cela a fonctionné pour moi, et maintenant je peux le lancer sur mobile!

 .pac-container { z-index: 10000 !important; width: auto !important; position: initial !important; left: 0 !important; right: 0 !important; display: block !important; } .pac-container:empty{ display: none !important; } 

Et ceci quelque part!

$ (‘selector’). append (‘. pac-container’);

Maintenant, les résultats apparaîtront dans le div sélectionné comme un élément de bloc normal 🙂

Il est très difficile d’inspecter les éléments car ils se ferment dès qu’ils perdent leur concentration.

Bien que nous sachions que le conteneur a la classe .pac-container et que les éléments ont un élément .pac-item , après avoir examiné l’API, j’ai constaté qu’il intégrait les styles CSS dans le document.

Voici ce qu’il ya d’abord, alors utilisez-le pour modifier les styles prédéfinis en fonction de vos besoins.

 .pac-container { background-color: #fff; position: absolute!important; z-index: 1000; border-radius: 2px; border-top: 1px solid #d9d9d9; font-family: Arial, sans-serif; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden } .pac-logo:after { content: ""; padding: 1px 1px 1px 0; height: 16px; text-align: right; display: block; background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3.png); background-position: right; background-repeat: no-repeat; background-size: 120px 14px } .hdpi.pac-logo:after { background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/powered-by-google-on-white3_hdpi.png) } .pac-item { cursor: default; padding: 0 4px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 30px; text-align: left; border-top: 1px solid #e6e6e6; font-size: 11px; color: #999 } .pac-item:hover { background-color: #fafafa } .pac-item-selected, .pac-item-selected:hover { background-color: #ebf2fe } .pac-matched { font-weight: 700 } .pac-item-query { font-size: 13px; padding-right: 3px; color: #000 } .pac-icon { width: 15px; height: 20px; margin-right: 7px; margin-top: 6px; display: inline-block; vertical-align: top; background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png); background-size: 34px } .hdpi .pac-icon { background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons_hdpi.png) } .pac-icon-search { background-position: -1px -1px } .pac-item-selected .pac-icon-search { background-position: -18px -1px } .pac-icon-marker { background-position: -1px -161px } .pac-item-selected .pac-icon-marker { background-position: -18px -161px } .pac-placeholder { color: gray }