1

I have a working searchbox and autocomplete from Google Places API in my website. The problem is that when the search box is too close to the edge of the screen, the autocomplete dropdown displays BELOW and you don't see it.

How to make it responsive? So that when the dropdown will go offscreen it goes to the other side and it's actually visible?

I've seen the documentation here: https://developers.google.com/maps/documentation/javascript/places-autocomplete And I see they have a class for the dropdown "pac-container", but nothing about it.

Does anyone know how to work this around? Thank you!

Nathalie
  • 111
  • 6
  • related questions: [google maps api places menu](http://stackoverflow.com/questions/12758855/google-maps-api-places-menu), [google maps autocomplete container position](http://stackoverflow.com/questions/35063875/google-maps-autocomplete-container-position); neither has answers. – geocodezip Feb 26 '16 at 21:49
  • CSS related questions: [dropup menus in CSS?](http://stackoverflow.com/questions/4329066/dropup-menus-in-css), [Making DropDown menu 'DropUp'](http://stackoverflow.com/questions/16240828/making-dropdown-menu-dropup); don't know if they will work for you. – geocodezip Feb 26 '16 at 21:56

1 Answers1

2

This worked for me : 

<style type="text/css">
  .pac-container{
    margin-top: -210px;
  }
</style>
felgharb
  • 89
  • 10