MaterializeCSS Autocomplete going upward

Question

The Materialize CSS Autocomplete opens in the upward position when at the lower end of the screen and it has a larger list to display, the problem is that the text input area with the blinking cursor gets covered and the user doesn't get the idea that he can type.

1) How can you force it to always go downwards? or, 2) How can you tell it to open above the input area without covering it when it decides to open in the upwards position? Ether of these solutions would be OK.

The closest solution I found is here (for the dropdown menu) and here, however these solutions look to me like jQuery which I am not familiar with (yet) and would need a plain JavaScript solution.

I use MaterializeCSS version 1.0.0 through the CDN.

Pictures: Autocomplete Closed and Autocomplete Open

Answer 1

hi the autocomplete is going upward because there is not space below but use can try this code

<style>

        #autocomplete-options-509040f2-ba4c-72d4-413d-2e375f5c25f8
        {
             position: initial;

        }
      </style>

or you can add jquery to add height of the parent div when the auto complete has been click

$("#idofautocomplte").on("click", function () {
        $("#parentDivId").css("height", "400px"); 
    });