Why is HTML dropdown appearing beside it's input instead of under it?

Question

I have an input bound to a datalist, and it IS working, but when the dropdown initially opens, the option list is beside (to the right of) the input. After I type a few chars to narrow down the list, it jumps over below the input, where it should be.

My guess: The option list is quite long, so perhaps because it's height is greater than the entire viewport, and after narrowing it down it is short enough to fit under the input?

How to I open the drop down below the input it is bound to?

Here is 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:">
  <option id="1205" value="FGAI-WOXR ROUTING:">
  <option id="1206" value="DOLW-BXBC ROUTING:">
  <option id="21" value="AAAA-BBCD ROUTING:">
  <option id="22" value="BBCD-MPOI ROUTING:">
  <option id="2205" value="FGAI-WOXR ROUTING:">
  <option id="2206" value="DOLW-BXBC ROUTING:">
  <option id="31" value="AAAA-BBCD ROUTING:">
  <option id="32" value="BBCD-MPOI ROUTING:">
  <option id="3205" value="FGAI-WOXR ROUTING:">
  <option id="3206" value="DOLW-BXBC ROUTING:">
  <option id="41" value="AAAA-BBCD ROUTING:">
  <option id="42" value="BBCD-MPOI ROUTING:">
  <option id="4205" value="FGAI-WOXR ROUTING:">
  <option id="4206" value="DOLW-BXBC ROUTING:">
  <option id="51" value="AAAA-BBCD ROUTING:">
  <option id="52" value="BBCD-MPOI ROUTING:">
  <option id="5205" value="FGAI-WOXR ROUTING:">
  <option id="5206" value="DOLW-BXBC ROUTING:">
  <option id="61" value="AAAA-BBCD ROUTING:">
  <option id="62" value="BBCD-MPOI ROUTING:">
  <option id="6205" value="FGAI-WOXR ROUTING:">
  <option id="6206" value="DOLW-BXBC ROUTING:">
  <option id="71" value="AAAA-BBCD ROUTING:">
  <option id="72" value="BBCD-MPOI ROUTING:">
  <option id="7205" value="FGAI-WOXR ROUTING:">
  <option id="7206" value="DOLW-BXBC ROUTING:">
  <option id="81" value="AAAA-BBCD ROUTING:">
  <option id="82" value="BBCD-MPOI ROUTING:">
  <option id="8205" value="FGAI-WOXR ROUTING:">
  <option id="8206" value="DOLW-BXBC ROUTING:">
  <option id="91" value="AAAA-BBCD ROUTING:">
  <option id="92" value="BBCD-MPOI ROUTING:">
  <option id="9205" value="FGAI-WOXR ROUTING:">
  <option id="9206" value="DOLW-BXBC ROUTING:">
  <option id="101" value="AAAA-BBCD ROUTING:">
  <option id="102" value="BBCD-MPOI ROUTING:">
  <option id="10205" value="FGAI-WOXR ROUTING:">
  <option id="10206" value="DOLW-BXBC ROUTING:">
  <option id="111" value="AAAA-BBCD ROUTING:">
  <option id="112" value="BBCD-MPOI ROUTING:">
  <option id="11205" value="FGAI-WOXR ROUTING:">
  <option id="11206" value="DOLW-BXBC ROUTING:">
  <option id="121" value="AAAA-BBCD ROUTING:">
  <option id="122" value="BBCD-MPOI ROUTING:">
  <option id="12205" value="FGAI-WOXR ROUTING:">
  <option id="12206" value="DOLW-BXBC ROUTING:">
  <option id="131" value="AAAA-BBCD ROUTING:">
  <option id="132" value="BBCD-MPOI ROUTING:">
  <option id="13205" value="FGAI-WOXR ROUTING:">
  <option id="13206" value="DOLW-BXBC ROUTING:">
</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>

Does this answer your question? [Is there a way to apply a CSS style on HTML5 datalist options?](https://stackoverflow.com/questions/13693482/is-there-a-way-to-apply-a-css-style-on-html5-datalist-options) — Dai, Aug 05 '22 at 20:33
Firefox/Gecko renders the datalist popup underneath the input in both cases, but Chrome/Blink does not. Sorry, but as of August 2022, none of the major browsers I've tried (Chrome, Edge, Firefox) expose the datalist UI to CSS for styling. Both Firefox and Chrome seem to render the UI _natively_ (just like a native context-menu) which actually is an entirely separate top-level desktop window rect as it can (and regularly does) overlap and overhang the browser view and window. — Dai, Aug 05 '22 at 20:39

score 0 · Answer 1 · answered Aug 24 '23 at 19:36

0

Solution by @Dai:

Firefox/Gecko renders the datalist popup underneath the input in both cases, but Chrome/Blink does not. Sorry, but as of August 2022, none of the major browsers I've tried (Chrome, Edge, Firefox) expose the datalist UI to CSS for styling. Both Firefox and Chrome seem to render the UI natively (just like a native context-menu) which actually is an entirely separate top-level desktop window rect as it can (and regularly does) overlap and overhang the browser view and window.

answered Aug 24 '23 at 19:36

Eric Aya

69,473
35
181
253

Not sure that it's ethical to take someone else's comment and offer it as an answer. – KWallace Aug 24 '23 at 20:04
1

@KWallace https://meta.stackexchange.com/q/309552/997587, https://meta.stackexchange.com/q/117251/997587 – starball Aug 24 '23 at 20:19
1

@KWallace I've posted their comment as a "community wiki" answer (which means I won't get any points for it), as one should do for useful comments. Totally ethical, yes, and beneficial for the community. – Eric Aya Aug 24 '23 at 21:39
"In general there's nothing wrong with this." Well, I guess that answers that! ;-) Thx. Still, doesn't seem right for someone who put no effort into their answer, to just take someone else's work and offer it as their answer and get points and reputation off someone else's work. Whether the HT'd them or not. Meh. Such is SO. ;-) – KWallace Aug 24 '23 at 21:41
1

@KWallace Read my comment please, and educate yourself. I would never take someone else's work. – Eric Aya Aug 24 '23 at 21:41
Dude, you copied and pasted it verbatim. Anyway, let's just leave this alone. This is the fatal flaw of SO, IMO, and one of the reasons a lot of people are turning to ChatGPT instead (including myself). – KWallace Aug 26 '23 at 16:15
@KWallace Yes, because it's not my answer - I just posted their comment. Did you not read my explanation? Do you not understand what "community wiki" is? Or are you just being contrarian because reasons? Seriously. – Eric Aya Aug 26 '23 at 16:32
Actually, no. I do not know what a community wiki is. Maybe that's the sticky bit? ;-) – KWallace Aug 26 '23 at 21:49

Why is HTML dropdown appearing beside it's input instead of under it?

1 Answers1