search

ubilabs / geocomplete

jQuery Geocoding and Places Autocomplete Plugin
http://ubilabs.github.com/geocomplete/
MIT License
1.22k stars 408 forks source link

not showing auto complete when use in bootstrap modal #280

Open sunildeveloper07 opened 8 years ago

sunildeveloper07 commented 8 years ago

HI,

When i bind plugin with input box which was in bootstrap modal box .then it will not show autocomplete suggestion.

sunildeveloper07 commented 8 years ago

i checked when i increase the z index of auto complete div then its showing .don't know proper solution On Aug 4, 2016 8:43 PM, "juliusvinton" notifications@github.com wrote:

I confirm this issue with the latest Bootstrap 3.3.7 and jQuery 3.1.0. Any ideas for a fix?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ubilabs/geocomplete/issues/280#issuecomment-237584291, or mute the thread https://github.com/notifications/unsubscribe-auth/AS1QEg5j3AAEU4zPkvowpUZ3cwEhcyeEks5qcgGRgaJpZM4JWHW5 .

Jirka1111 commented 8 years ago

Can you write an example? I have increased z-index of text_field with autocomplete but it still doesn't show.

sunildeveloper07 commented 8 years ago

not to increase input zindex . increase the z index of div which was auto generated by auto completed. On Sep 23, 2016 6:28 PM, "Jirka1111" notifications@github.com wrote:

Can you write an example? I have increased z-index of text_field with autocomplete but it still doesn't show.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ubilabs/geocomplete/issues/280#issuecomment-249185134, or mute the thread https://github.com/notifications/unsubscribe-auth/AS1QEhly3nzuEWDrO3L9FOo78biF6KuVks5qs8zhgaJpZM4JWHW5 .

ghost commented 8 years ago

I've solved it this way. Maybe something to consider for the next update.

.pac-container {
    z-index: 9999;
}
Jirka1111 commented 8 years ago

Sorry guys, still don't get it:

http://www.codesend.com/view/51a7281f4905c3e8eabda09b85928d33

Which one has to have big z-index?

Jirka1111 commented 8 years ago

Oh my god, I couldn't send it normally so sorry for the redirect.

Jirka1111 commented 8 years ago

Now i get it. Thanks you both! It was a .pac-container: 9999999999 !important

I always use !important in case of Bootstrap...

Jirka1111 commented 8 years ago

I think this solution has to be mentioned in the description of that plugin...

Explanation (sum up): Geocomplete works even in Bootstrap modal, but it is not visible. You have to set z-index of autogenerated div to something like 99999999999 with !important.

Solution (by juliusvinton and sunildeveloper07):

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

.pac-container is autogenerated class of geocomplete plugin. You don't have it in your code, but it is visible in code inspector in Chrome.