I have an input linked to a datalist, and it's functioning correctly. However, when I initially open the dropdown, the option list appears next to (right of) the input. After entering a few characters to narrow down the list, it then shifts below the input, where it should be.
https://i.sstatic.net/JvQJN.png
https://i.sstatic.net/lwrd7.png
My theory is that the height of the option list is quite long, so perhaps its height exceeds that of the entire viewport, causing it to shift below the input once narrowed down?
How can I get the dropdown to open below the input it's associated with?
Here's the HTML and CSS:
input[type="text"] {
width: 500px;
height: 24px;
color: white;
background-color: #176f88;
border: 0px;
border-radius: 4px;
margin-right: 42px;
}
div {
margin: 1em;
}<div>
<label>
This input has a long datalist
<input type="text" list="route_list" autocomplete="off" id="route_selector1">
</label>
</div>
<div>
<label>
This input has a short datalist
<input type="text" list="short_route_list" autocomplete="off" id="route_selector2">
</label>
</div>
<datalist id="route_list">
<option id="1" value="AAAA-BBCD ROUTING:">
<option id="2" value="BBCD-MPOI ROUTING:">
<option id="205" value="FGAI-WOXR ROUTING:">
<option id="206" value="DOLW-BXBC ROUTING:">
<option id="11" value="AAAA-BBCD ROUTING:">
<option id="12" value="BBCD-MPOI ROUTING:">
...and so on...
</datalist>
<datalist id="short_route_list">
<option id="1" value="AAAA-BBCD ROUTING:">
<option id="2" value="BBCD-MPOI ROUTING:">
<option id="205" value="FGAI-WOXR ROUTING:">
<option id="206" value="DOLW-BXBC ROUTING:">
</datalist>