I'm using google autoplete inside a modal. When I click the input field it display the results behind the modal. I didn't use any css. It work perfect outside the modal. But it is not working fine inside the modal. Please help me.

HTML code

<div class="form-group">
    <p class="control-label1">City</p>
    <input type="text" id="locationTextField" placeholder="" name="city" class="form-control">
</div>

Javascript code

//Google Map
function initialize() {
    var input = document.getElementById('locationTextField');
    var autoplete = new google.maps.places.Autoplete(input);
}

function validateCity() {
    searchfield = $('#locationTextField').val();
    if (searchfield == "" || searchfield == null) {
        return false;
    }
    else {
        $('#locationTextField').val('');
        return false;
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

I'm using google autoplete inside a modal. When I click the input field it display the results behind the modal. I didn't use any css. It work perfect outside the modal. But it is not working fine inside the modal. Please help me.

HTML code

<div class="form-group">
    <p class="control-label1">City</p>
    <input type="text" id="locationTextField" placeholder="" name="city" class="form-control">
</div>

Javascript code

//Google Map
function initialize() {
    var input = document.getElementById('locationTextField');
    var autoplete = new google.maps.places.Autoplete(input);
}

function validateCity() {
    searchfield = $('#locationTextField').val();
    if (searchfield == "" || searchfield == null) {
        return false;
    }
    else {
        $('#locationTextField').val('');
        return false;
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

• javascript
• jquery
• twitter-bootstrap
• modal-dialog
• bootstrap-modal

Share Improve this question Follow asked Dec 13, 2016 at 11:47 user7152572user7152572 33311 gold badge44 silver badges1616 bronze badges 2

• can you please provide your html code – RonyLoud Commented Dec 13, 2016 at 11:50
• @RonyLoud I found the answer. – user7152572 Commented Dec 13, 2016 at 11:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

I found the answer by adding below code inside css

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