Jqueryの位置ピッカーのオートコンプリートがブートストラップのモーダルで機能しない

Question

ブートストラップのモーダル内でjqueryの位置ピッカーを使用しています。地図が開きますが、オートコンプリート候補は表示されません。

htmlコードとjavascriptコードを以下に示します。 jqueryののz屈折率も追加UIフロント・クラスを変更する試み

$timeout(function() { 
 
    $('#onboardingModal').on('shown.bs.modal', function() { 
 
    $('#mappicker').locationpicker({ 
 
     location: { 
 
     latitude: 12.9715987, 
 
     longitude: 77.59456269999998 
 
     }, 
 
     radius: 200, 
 
     inputBinding: { 
 
     locationNameInput: $('#locationInput') 
 
     }, 
 
     enableAutocomplete: true, 
 
     autocompleteOptions: { 
 
      componentRestrictions: {country: 'in'} 
 
     }, 
 
     onchanged: function (currentLocation, radius, isMarkerDropped) { 
 
          var addressComponents = $(this).locationpicker('map').location.addressComponents; 
 
          $scope.lat = $(this).locationpicker('map').location.latitude 
 
          $scope.lng = $(this).locationpicker('map').location.longitude 
 
          // updateControls(addressComponents); 
 
     }, 
 
    }); 
 
    }); 
 
});

<div class="modal fade" id="onboardingModal" tabindex="-1" role="dialog" aria-labelledby="onboardingModalLabel" style="overflow:hidden" data-backdrop="static" data-keyboard="false"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="form-group"> 
 
      <label for="locationInput">LOCATION</label> 
 
      <input type="text" class="form-control" id="locationInput" placeholder="Search"/> 
 
      <div align="center" class="map" id="mappicker" style="width: 500px !important; height: 300px"></div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

、いずれの場合に動作しませんでした。 私はこれで何が間違っていますか？

Answer 1

私はgithubの問題の1つで答えを得ました。 p-containerにz-indexを追加する必要があります。

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

参考：Github issue