I am using a datalist to display a drop down as
<datalist id="ddl1">
<option value="one">Apple</option>
<option vlaue="two">Mango</option>
<option value="three">Cherry</option>
</datalist>
How can I increase the spacing between 2 datalist rows. If I try adding
<option value="one">One<br /></option>
This shows up fine in Safari but shows a <br /> as text in chrome.
How can this be resolved.
Unfortunately this is not possible as of yet. Recent versions of Chrome don't show the <br /> as text anymore, but also don't render a newline in the dropdown.
Generally this should be fixed with CSS as it's a styling problem, but that doesn't work either. The actual datalist element only provides values for the suggestion dropdown, but the element itself is not shown. The list you see resides in the shadow DOM, just like (for example) the up/down arrows on an <input type="number" />.
One would hope for some datalist pseudo-selectors like input::-webkit-outer-spin-button that Chrome has for the number controls, but none have been specced or implemented for datalist at all.
Related
If I use the normal datalist, for example, like this.
<input name="example" list="example" />
<datalist id="example">
<option value="Value1"></option>
<option value="Value2"></option>
</datalist>
When I click on an item, it starts only showing that element. And I can't go back to see all the items. How can I fix that?
Note that I don't want to use select either, because it doesn't allow me to copy an entry.
That is one of Datalist's limitations, but there are some workarounds: http://pebbleroad.github.io/combo-select/
If a <select> element has a selected option, Chrome will ignore that selected option even if autocomplete="off" on the <select> element when using the browser's "navigate back" functionality. One workaround I have found is wrapping the select in a <form>, but I don't want extraneous forms in my html.
Question: Is there a way to fix this in Chrome without wrapping in a form element? (This behavior does not occur in Firefox, haven't tested other browsers)
To reproduce, using Chrome 77:
1.) Visit this jsfiddle, and change both selects to "One". Note that "Two" is the selected option for both, so when the page loads this is what should be selected in both elements
2.) Click on the link to google (page navigation won't actually occur, jsfiddle output can't actually navigate to webpages)
3.) With your mouse having clicked in jsfiddle output, click the browser's back button
4.) You'll note that the select element which is wrapped in a form has the correct element selected by default, "Two". The select element which is not wrapped in a form has the incorrect element selected, "One"
https://jsfiddle.net/m5hg8n40/1/
<!-- chrome ignores 'selected' -->
<select autocomplete="off">
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
<br><br>
google.com
<br><br>
<!-- chrome obeys 'selected' -->
<form autocomplete="off">
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
</form>
MAC OS Catalina 10.15
Browsers
Google Chrome Version 77.0.3865.120 (Official Build) (64-bit)
Safari Version 13.0.2 (15608.2.30.1.1)
Firefox 70.0
Actions tested:
Onload the jsfiddle i see both with the two option selected
If i click google link and go back, both keeps two selected
If i modify first select (without form) to one, go google and go
back, it keeps the one selected
If i modify the second select (with form) to one, go google, and go
back, it will show the two option selected
So as far as i see.
On load works for both, but the window History treats slightly different both input select, if they are wrapped or not in a <form>tag
One will keep the last action executed, and the other will take priority of the form to reset its inputs to the default state.
Excepcion: Firefox treat both with the same behavior (like without the form)
For me it seems legit to use the tag there if you need it, they can be use to collect data even if they are going to be used locally or remotely.
( is not worse than pages having 1047248 <div>'s everywhere and zero semantic HTML ) so its really up to you i think. And if you need to store data in another way you could use LocalStorage
I think you can't do anything without js.
<body onload="document.querySelector('select').value = document.querySelector('select [selected]').value">
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
<br><br>
google.com
<br><br>
<form autocomplete="off">
<select>
<option value="1">One</option>
<option value="2" selected>Two</option>
</select>
</form>
</body>
In my html form, I currently have a text input as follows:
<input list="BMUnits" name"BMUnitID" value"<?php echo $chosenBMU ?>" autocomplete="off">
<datalist id="BMUnits">
<option value="1">
...
<option value="300">
</datalist>
When the user types the drop down that shows the datalist goes off the screen, is there a way to define a certain number of elements in the datalist to be shown at once?
It seems that it is not possible. The current <datalist> tag does not support any special HTML attribute nor you can use CSS to style the dropped list. This means that only the browser can decide how the dropped list will look like. For example, IE (now called MS Edge) will show a scrollbar if the list is too long, but chrome won't. All we can do is waiting until browsers support that.
Alternativly, you can use jQueryUI Combobox or Chosen for more flexible drop list.
I have a form and there I have a field of type text, I wanted it to have a suggestion list when the user types something in, I made it like this:
State: <br>
<input type="text" name="state" size="35" autocomplete="on" list="states" required> <br><br>
<datalist id="states">
<option value="Baden-Württemberg">
.....
</datalist>
So in the Test Browser of the software I use (CoffeeCup HTML Editor) and in the newest Internet Explorer it actually works, but when I run this in Chrome it is just a simple textfield and has no dropdown list
If I type the first letter of any of the elements, a list actually pops up, but it would be nice to have a full list showing, like it does in IE.
Do I have to do something special for chrome?
Chrome:
IE:
In recent versions of Chrome a downward triangle icon appears in the input on focus which allows you to see all suggestions. This is present in Chrome 42, I haven't checked older versions to see when this was implemented.
Note that there is no scrolling in the suggestions list. If it exceeds the page it will overflow out of the browser and will continue even below the bottom of your screen with no method of reaching some of the values until you type more characters.
I have two drop downs in a search box, a "YearFrom" and a "YearTo".
When nothing has been selected in the "YearFrom", the "YearTo" box looks a little like this :
However the functionality is that once a "YearFrom" is selected, that the "YearTo" fields only offer what is available AFTER the year from. In essence, we end up with HTML like this :
<select>
<option value="">Any</option>
<option value="1950" disabled="disabled" style="display: none;">1950</option>
<option value="1960" disabled="disabled" style="display: none;">1960</option>
...
<option value="2011" style="">2011</option>
<option value="2012" style="">2012</option>
<option value="2013" style="">2013</option>
</select>
So any years below the YearFrom value are hidden. However what we then end up with is the select list looking like this :
So it isn't so much as a drop down, as now a tiny little box with a scroller on the right.
For reference, this doesn't happen in any other browser. e.g. this is how it looks in Firefox.
I've just come across this error as well.
My guess is that the Chrome browser calculates the drop-down height by measuring the heigths of the options and optgroups, but stops calculating the moment it comes across an element that has no height or is display:none.
To work around this in my own code, I dynamically rearrange the options after each update so that display:none elements are at the bottom of the list. it creates another visual bug (white space on right of dropdown) but I can live with that one.