Google Place Autocomplete dropdown falling "below" screen

Question

I've been writing AngularJS web app and google places autocomplete autogenerated dropdown code causes it to sometimes be out of DOM.

HTML code defining input to be used for Google Place Autocomplete:

<div id="visible-content">
    <label>Google Places Autocomplete:</label>
    <input id="searchTextField" style="width: 300px" />
</div>

Javascript code inside AngularJS controller initializing Place Autocomplete:

var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);

When run, it looks like this. And if I open DevTools, we can see how it looks under the hood. On second picture, marked with 1 is part written by myself, an input field which I use for autocomplete. And 2 is code autogenerated by Google's framework. As you can see it is at the bottom of the document, right before closing body tag, and outside div element (id visible-content) inside which is my autocomplete input.

Problem: This eventually causes google autocomplete's dropdown not to be shown because input field might be too low and dropdown gets placed "below" the screen, and screen won't become scrollable because autogenerated code is outside all elements.

Question: Is there a clean way to prevent this dropdown from "going below screen" if input field is too low?

Answer 1

In short: make sure the input field is never too low.

In Long: Google doesn't give us any control over the placement of the dropdown. There's nothing in the documentation about placement on the screen.

So we have 2 choices:

1. Use css to make sure there's always room under the input field. margin-bottom: 190px; for example.
2. Write our own dropdown using the AutocompleteService to back it up.

Obviously 2 is a lot more work, but you also have a lot more control of the look and placement.

Answer 2

You can use CSS to place the autocomplete window wherever you want, the class is .pac-container .

for example:

.pac-container {
   top: 517px !important;
}