jquerycssruby-on-railstwitter-bootstrapgeocomplete

Put Geocomplete plugin to Bootstrap modal

I have tried Geocomplete but my code still doesn't work. I want to use Geocomplete in Bootstrap modal. This is my code:

<script type="text/javascript">
  $("#cities").geocomplete();
</script>


<%= f.text_field :place, id: "cities", class: "form-control", type: "text" %>
Solution

  • You can put Geocomplete plugin to the Bootstrap modal, but it will look like it's not working. Try the plugin somewhere else on the webpage. If it works normally in webpage but not in the modal, the solution is pretty easy.

    Geocomplete works, but it is invisible. You have to type in styles this:

    <style type="text/css">
  .pac-container{
    z-index: 99999999999999 !important;
  }
</style>

    Explanation: Autocomplete list is in the background, you can't see it. If you set z-index on this div class (you haven't this class in your view, it is autogenerated by Bootstrap), the autocomplete div will appear because now it has bigger z-index than modal and other things (bigger priority of visibility).