CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-modaljquery-location-picker
kaushikdr
kaushikdr

Reputation: 2049

Jquery location picker autocomplete doesn't work in bootstrap modal

I am using jquery location picker inside a bootstrap modal. It opens the map but the autocomplete suggestions are not visible.

The html and the javascript code are given below.

$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>

Tried changing the z-index also added ui-front class of jquery, didn't work on either case. What am I doing wrong in this?

Upvotes: 1

Views: 797

Answers (1)

kaushikdr
kaushikdr

Reputation: 2049

I got the answer in one of the issues in github. Needed to add z-index to pac-container.

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

Reference: Github issue

Upvotes: 5

Related Questions