[Search and Autocomplete] Search results limited to maximum height

[Search and Autocomplete] Search results limited to maximum height

  
Forge Component
(15)
Published on 15 Feb by Leonardo Fernandes
15 votes
Published on 15 Feb by Leonardo Fernandes
We incorporated the Autocomplete component in our application. We are trying to limit the results that are shown in the drop down list to a maximum height, to avoid the list to fall of the page whenever there is a large number of results.
The results web block is embedded inside a container, to which the following CSS is applied:
    max-height: 230px;
    overflow-y: auto;
The results are actually limited to the supplied maximum height, and by supplying the overflow-y property, a vertical scroll bar is displayed to scroll down the list.
However, when using the down arrow key to scroll down the list, the list box does not scroll down with the selected line whenever the selection drops below the supplied maximum height of the container.

Is there a way to get the key board selection working?

Example: See https://petervm.outsystemscloud.com/TestAutoComplete/

Try searching with the letter "in" vs "invoice"

I've attached a sample application.
Yes, simply apply those same styles, but to the element with class lfs-results-layer:

.lfs-results-layer {
    max-height: 230px;
    overflow-y: auto;
}

Best regards,
Leonardo Fernandes
Thanks Leonardo, works great!