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: 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>
Post a Comment for "Datalist Vertical Scroll Not Working In Chrome"