Google Maps Autocomplete-Ergebnis im Bootstrap Modal Dialog

Question

Ich habe ein Google Maps Autocomplete-Eingabefeld in einem Twitter Bootstrap-Modaldialog und das Autocomplete-Ergebnis wird nicht angezeigt. Wenn ich jedoch die Abwärtspfeiltaste drücke, wird das nächste Autocomplete-Ergebnis ausgewählt. Daher scheint der Autocomplete-Code korrekt zu funktionieren, nur dass das Ergebnis nicht korrekt angezeigt wird. Vielleicht ist es hinter dem modalen Dialog verborgen?

Hier die Screenshots:

<div class="modal hide fade" id="map_modal"> 
<div class="modal-body"> 
    <button type="button" class="close" data-dismiss="modal">×</button> 
    <div class="control-group"> 
     <label class="control-label" for="keyword">Cari alamat :</label> 
     <div class="controls"> 
      <input type="text" class="span6" name="keyword" id="keyword"> 
     </div> 
    </div> 
    <div id="map_canvas" style="width:530px; height:300px"></div> 
</div> 
<div class="modal-footer"> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
    <a href="#" class="btn btn-primary">Save changes</a> 
</div> 

:

etwas in der Autocomplete-Feld nichts Typing

den Pfeil Drücken nach unten Taste öffnet das erste Ergebnis

und der Code gibt

<script type="text/javascript"> 
$("#map_modal").modal({ 
    show: false 
}).on("shown", function() 
{ 
    var map_options = { 
     center: new google.maps.LatLng(-6.21, 106.84), 
     zoom: 11, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), map_options); 

    var defaultBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-6, 106.6), 
     new google.maps.LatLng(-6.3, 107) 
    ); 

    var input = document.getElementById("keyword"); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
    autocomplete.bindTo("bounds", map); 

    var marker = new google.maps.Marker({map: map}); 

    google.maps.event.addListener(autocomplete, "place_changed", function() 
    { 
     var place = autocomplete.getPlace(); 

     if (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(15); 
     } 

     marker.setPosition(place.geometry.location); 
    }); 

    google.maps.event.addListener(map, "click", function(event) 
    { 
     marker.setPosition(event.latLng); 
    }); 
}); 
</script> 

Ich habe mein Bestes versucht, dies auf eigene Faust zu lösen, aber da ich die HTML-& CSS für das Ergebnis der automatischen Vervollständigung nicht kennen (inspizieren Element nichts gibt), ich bin jetzt in einem verloren. Irgendwelche hilft?

Vielen Dank!

Answer 1

Das Problem ist, mit dem z-index des .modal

verwenden CSS Markup:

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

Sie können auch die letzte Demo überprüfen here

ps: dank @ Lilina für diese Demo auf jsfiddle.com

Answer 2

Im Allgemeinen können Sie den .pac-container z-index auf etwas über 1050 hochsetzen, und Sie werden die anderen CSS-Überschreibungen nicht benötigen.

Ich entdeckte, dass dieses Problem auch für jQuery UI-Dialoge besteht. Also, falls es jedes Wesen hilfreich endet anders, hier ist eine schnelle Referenz für, wo die Bootstrap/jQuery UI modals lebt in der z-Ebene:

jQuery UI Dialog - z-index: 1001 
Bootstrap Modal - z-index: 1050 

Answer 3

Bootstrap der .modalz-index ist standardmäßig 1050.

jQuery UI .ui-autocompletez-index ist standardmäßig 3.

dies also auf dem CSS setzen:

/* 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; 
} 

W Orks Wunder! :)

Answer 4

In meinem Szenario wird der Z-Index-Wert des .pac-Containers init sein und auf 1000 überschreiben, sogar ich setze in CSS. (möglicherweise durch Google API?

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

Answer 5

mit Bootstrap 3 Arbeitete auf Ihre style.css Seite stellen Sie den z-index für .modal bis 20.

beispiels

.modal { 
    z-index: 20 !important; 
} 

Answer 6

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

hat es für mich

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

Answer 7

Wenn Sie Visual Studio verwenden,:)

meine schmutzige fix

$('#myModal').on('shown', function() { 
    $(".pac-container").css("z-index", $("#myModal").css("z-index")); 
} 

Answer 8

Das ist für mich gearbeitet.

    var pacContainerInitialized = false; 
        $('#inputField').keypress(function() { 
          if (!pacContainerInitialized) { 
            $('.pac-container').css('z-index','9999'); 
            pacContainerInitialized = true; 
          } 
        });