Auto Completing Inside an ng-show and Modal

[acedesigns]

Hi @kuhnza Thank you for the great directive.

I was testing it out and at first it seemed fine when I implement on my code, however I ran into a problem when I had a section that was inside of a ng-show / nghide. The issue is that the auto generated list does not show up next to the input field. When I look at the DOM I can see the template being rendered.

See my Bin

http://jsbin.com/susovucofe/1/edit?html,js,output

Also the same thing http://plnkr.co/edit/NC1utk6y2GkQwe3x13ok?p=preview

This issue also happens when I use the directive in a modal:

<script type="text/ng-template" id="modalContent.html">
<p> Provide a Location <br />
 <input class="form-control " type="text" g-places-autocomplete ng-model="locationService" />
 </p>
</script>

[wesley3523]

Is there already a solutions for this problem?

[wesley3523]

solved it with adding z-index to the pac-container

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

[thomas-tran]

Same issue, I could not see autocomplete display when using modal popup. I tried to change z-index:9999 !important; but did not work

[sdbradley]

Any update on this? I have the same issue, cannot see the autocomplete inside of a modal text/ng-template.

[gelevanog]

[mvandermeulen]

I had to use:

z-index: 2147483647 !important;

In case it is not clear, the autocomplete is likely showing however the z-index is causing it to be hidden behind the modal, so increasing it should put it on top of the modal.

[lmoncany]

Same issue, any updates ?

[inochiconcept]

first of all and even if it(s not the solution, using ng-if instead of ng-view will show up the autocompleat suggestions. This is coming from the fact that ng-show will add a "display: none;" to the css witch will affect the autocompleat box. the ng-if will create the html and remove it and will not toggle the display property. However this will create another issue with the box position that could be solved with css