The problem is simple, when it is Modal Boostrap the suggestions do not appear, only appears if I click the down arrow on my computer. I have already researched and seen a few posts stating that the Bootstrap Z-index problem, I changed the Z-index of the .modal-backdrop class to 20 not only the main file but all the .css files that were being pulled to my page function, I also changed the z-index of the .pac-container class to 10000 including in-line inside the proper div to see if it works and guess what, it did not work. Remembering that if I take the part of the google code that makes the map appear and put out of modal, everything works perfectly only within the modal that happens this problem. Any other suggestions to help me?
Google Code
<div class="pac-card" id="pac-card">
<div>
<div id="title">
Autocomplete search
</div>
<div id="type-selector" class="pac-controls">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-address">
<label for="changetype-address">Addresses</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
</div>
<div id="strict-bounds-selector" class="pac-controls">
<input type="checkbox" id="use-strict-bounds" value="">
<label for="use-strict-bounds">Strict Bounds</label>
</div>
</div>
<div id="pac-container" style="z-index:10000;">
<input id="pac-input" type="text"
placeholder="Enter a location">
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon">
<span id="place-name" class="title"></span><br>
<span id="place-address"></span>
</div>