Datalist Vertical Scroll Not Working In Chrome

September 29, 2023 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>
<scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><scripttype="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><scriptsrc="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><formaction="demo_form.asp"method="get"><inputlist="browsers"name="browser"><datalistid="browsers"><optionvalue="a"></option><optionvalue="b"></option><optionvalue="c"></option><optionvalue="d"></option><optionvalue="e"></option><optionvalue="f"></option><optionvalue="g"></option><optionvalue="h"></option><optionvalue="i"></option><optionvalue="j"></option><optionvalue="k"></option><optionvalue="l"></option><optionvalue="m"></option><optionvalue="n"></option><optionvalue="o"></option><optionvalue="p"></option><optionvalue="q"></option><optionvalue="r"></option><optionvalue="s"></option><optionvalue="t"></option><optionvalue="u"></option><optionvalue="v"></option><optionvalue="w"></option><optionvalue="x"></option><optionvalue="y"></option><optionvalue="z"></option></datalist><inputtype="submit"><divid="options"></div></form><divclass="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 = newComboBox('cb_identifier');

div.combobox {
  font-family: Tahoma;
  font-size: 12px
}

div.combobox {
  position: relative;
  zoom: 1
}

div.comboboxdiv.dropdownlist {
  display: none;
  width: 200px;
  border: solid 1px#000;
  background-color: #fff;
  height: 200px;
  overflow: auto;
  position: absolute;
  top: 18px;
  left: 0px;
}

div.combobox.dropdownlista {
  display: block;
  text-decoration: none;
  color: #000;
  padding: 1px;
  height: 1em;
  cursor: default
}

div.combobox.dropdownlista.light {
  color: #fff;
  background-color: #007
}

div.combobox.dropdownlist,
input {
  font-family: Tahoma;
  font-size: 12px;
}

div.comboboxinput {
  float: left;
  width: 182px;
  border: solid 1px#ccc;
  height: 15px
}

div.comboboxspan {
  border: solid 1px#ccc;
  background: #eee;
  width: 16px;
  height: 17px;
  float: left;
  text-align: center;
  border-left: none;
  cursor: default
}

<scripttype="text/javascript"charset="utf-8"src="https://www.zoonman.com/projects/combobox/combobox.js"></script><divclass="combobox"><inputtype="text"name="comboboxfieldname"id="cb_identifier"><span>▼</span><divclass="dropdownlist"><a>Item1</a><a>Second Item2</a><a>Third Item3</a></div></div>

Html5 Dev

Datalist Vertical Scroll Not Working In Chrome

Solution 1:

Solution 2:

Solution 3:

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