How to change datalist screen width
I have a simple problem with an HTML directory, but somehow I can't seem to solve this problem. I tried to change the displayed width for the following datalist:
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="this is a really long name for a browser">
<option value="Firefox">
<option value="Chrome">
<option value="Internet Explorer">
</datalist>
<input type="submit">
but no matter what I try, it still truncates the "long" values. how can i change this so that datalist shows all parameter values no matter how long they are?
Regards
source to share
Browsers do not yet have a standardized way to display data directories (and some browsers may not even support it.) If you are looking for a polyfill, the jQuery remote list plugin uses webshim to add that provide a consistent look and feel. I tested the webshim / datalist combination using BrowserStack.com and Firefox, Chrome, iOS 9, Android 4.3, IE8 / 9/10/11 / Edge, which appear to work and are not limited by the width of the parent INPUT field.
https://github.com/aFarkas/remote-list
https://github.com/aFarkas/webshim
NOTE. The developer webshim has indicated that he has no plans to develop a new major version for compatibility with w / jQuery 3.0.
source to share
This example works
<input list="cropBeds" id="myCropBeds" name="listCropBeds" />
<datalist id="cropBeds">
<option value="TO">
<option value="TM">
<option value="TE">
<option value="TS">
<option value="LT">
<option value="JT">
</datalist>
with css file
input[name='listCropBeds']{width: 30px;}
inspiration for this is: https://codepen.io/anon/pen/xRjzKg
source to share