Saltar al contenido

Resultado de Autocompletar de Google Maps en el cuadro de diálogo modal de Bootstrap

Solución:

El problema es con z-index de El .modal

Utilizar esta CSS margen:

.pac-container {
    background-color: #FFF;
    z-index: 20;
    position: fixed;
    display: inline-block;
    float: left;
}
.modal{
    z-index: 20;   
}
.modal-backdrop{
    z-index: 10;        
}​

También puedes consultar la demostración final aquí.

PD: gracias a @lilina por esa demostración en jsfiddle.com

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

lo hizo por mi

https://github.com/twbs/bootstrap/issues/4160

Bootstrap’s .modal z-index es por defecto 1050.

Interfaces de usuario de jQuery .ui-autocomplete z-index es por defecto 3.

Así que pon esto en el CSS:

/* Fix Bootstrap .modal compatibility with jQuery UI Autocomplete,
see http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog */
.ui-autocomplete {
    z-index: 1051 !important;
}

¡Funciona de maravilla! 🙂

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *