CODEWITHSUNDEEP
angularjsionic-frameworkgoogle-places
MNelmes
MNelmes

Reputation: 124

Google Places Autocomplete suggestions not clickable when in Ionic modal

I'm trying to render Google Places Autocomplete within a modal in an Ionic project.

I'm rendering the modal with a template:

<script id="modal.html" type="text/ng-template">
  <div class="modal">
    <header class="bar bar-header bar-light">
      <h1 class="title">Create event</h1>
      <div class="button button-clear" ng-click="close()"><span class="icon ion-close"></span></div>
    </header>
    <content has-header="true" padding="true">
              <label class="item item-input item-light">
                <input type="text" g-places-autocomplete ng-model="event.venue" placeholder="Venue/Location">
              </label>
    </content>
  </div>
</script>

The Google Places suggestions render as expected in the correct location, however are unclickabe. A lot of searching around the web has suggested a z-index issue on the pac-container class, but no amount of changing this z-index solves my problem.

Using element inspector, I think it's more of an issue with the ordering of which the elements are appearing in the DOM as the Autocomplete elements including the pac-container are dynamically appended immediately after the opening body tag, then the modal get's rendered just before the closing body tag, so it seems regardless of z-index the pac-container is 'underneath' the modal.

Over than that, I'm really stuck. Any suggestions would be welcome.

Upvotes: 0

Views: 761

Answers (1)

MNelmes
MNelmes

Reputation: 124

After following some fantastic advice on the Ionic forum the solution is:

.pac-container {
        z-index: 3000 !important;
        }
.modal-open {
            pointer-events: auto !important;
        }

Upvotes: 2

Related Questions