datalist vertical scroll not working in chrome

Question

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 1

Unfortunately, No you can't use overflow-y property for datalist . You will have to write jQuery code to make it happen or at least show all possible values.

I wrote a small example for you i hope it will help you to get it done for you yourself:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
  #options{
    display: none;
    height: 300px;
    text-align: center;
    border: 1px solid red;
    overflow-y:scroll;
  }
  #options>p{
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }
    </style>
</head>
<body>
<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>

  </datalist>

  <input type="submit">

  <div id="options">
  </div>

</form>
<div class="med_rec"></div>
<script>
$('#browsers option').each(function(){
  $('#options').append('<p>'+$(this).val()+'</p>');
})

$('#options').css({'width':$('input[name="browser"]').width()});
    $('input[name="browser"]').click(function(){
         $('#options').show();
    });
  $('input[name="browser"]').keyup(function(){
    $('#options').hide();
  });
  $('#options p').click(function(){
    $('input[name="browser"]').val($(this).text());
    $('#options').hide();
  })
</script>
</body>
</html>

It actually creates a second option list for you to choose from which is scrollable and if user types in input box then datalist works as expected to give suggestions.

I hope it helps

Answer 2

There is simple solution for this. Use https://github.com/b3n/datalist plugin.

Example:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="YOURBASE_JS_PATH/src/datalist.js"></script>

var maxHeight = '200px';
var openOnClick = true;
$('input[list]').datalist(maxHeight, openOnClick);

Answer 3

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>

datalist vertical scroll not working in chrome

Question

3 answers

solution1
0 2016-11-23 12:35:41

solution2
0 2018-06-21 15:03:53

solution3
-2 ACCPTED 2016-11-29 05:47:11

datalist vertical scroll not working in chrome

Question

3 answers

solution1 0 2016-11-23 12:35:41

solution2 0 2018-06-21 15:03:53

solution3 -2 ACCPTED 2016-11-29 05:47:11

solution1
0 2016-11-23 12:35:41

solution2
0 2018-06-21 15:03:53

solution3
-2 ACCPTED 2016-11-29 05:47:11