Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

Datalist Vertical Scroll Not Working In Chrome

Post a Comment
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: s

Solution 1:

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);

Solution 2:

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


Solution 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>

Post a Comment for "Datalist Vertical Scroll Not Working In Chrome"