Vishnu Vishnu - 8 days ago 5
CSS Question

datalist vertical scroll not working in chrome

I have used datalist function to list my product names, if list goes too long vertical scrolling not display in google chrome and some browsers. Is it possible to add

overflow-y: scroll
in css style for datalist? Used code below:



<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
<option value="abc"></option>
<option value="def"></option>
<option value="ghi"></option>
<option value="jkl"></option>
<option value="mno"></option>
<option value="pqrs"></option>
<option value="tuv"> </option>
</datalist>
<input type="submit">

</form>




Answer

I have used ComboBox Javascript Component to fix this problem, from: https://www.zoonman.com/projects/combobox/

var no = new ComboBox('cb_identifier');
div.combobox	{font-family: Tahoma;font-size: 12px}
	div.combobox	{position: relative;zoom: 1}
	div.combobox	div.dropdownlist	{display: none;width: 200px;
		border: solid 1px #000;background-color: #fff;
		height: 200px;overflow: auto;position: absolute;
		top: 18px;left: 0px;}
	div.combobox	.dropdownlist	a	{display: block;text-decoration: none;
		color: #000;padding: 1px;height: 1em;cursor: default}
	div.combobox	.dropdownlist	a.light	{color: #fff;
		background-color: #007}
	div.combobox	.dropdownlist, input {font-family: Tahoma;font-size: 12px;}
	div.combobox	input {float: left;width: 182px;
		border: solid 1px #ccc;height: 15px}
	div.combobox	span	{border: solid 1px #ccc;background: #eee;
		width: 16px;height: 17px;
		float: left;text-align: center;border-left: none;cursor: default}
<script type="text/javascript" charset="utf-8" src="https://www.zoonman.com/projects/combobox/combobox.js"></script>

<div class="combobox">
	<input type="text" name="comboboxfieldname" id="cb_identifier">

	<span>▼</span>
	<div class="dropdownlist">
		<a>Item1</a>
		<a>Second Item2</a>

		<a>Third Item3</a>
	</div>
</div>