How To Make A Html Datalist Overflow?

I am trying to make the category list show about 7 options and scroll on the rest since the list is quite long and scrolls off the page. I have tried to do css overflow, but I am n

Solution 1:

You can make use of combox box as an alternate to datalist available here.

https://www.zoonman.com/projects/combobox/

    <style type="text/css" media="screen">
        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}
    </style>

<!-- HTML code -->
<div class="combobox">
    <input type="text" name="comboboxfieldname" id="cb_identifier">

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

        <a>Item3</a>
    </div>
</div>
<!-- JS code -->
<script type="text/javascript" charset="utf-8" src="combobox.js"></script>
<script type="text/javascript" charset="utf-8">

var no = new ComboBox('cb_identifier');
</script>

download combobox plugin from:

https://www.zoonman.com/projects/combobox/combobox.js

Solution 2:

Unfortunately, there's not much you can do with the datalist attribute. The datalist does not currently support any CSS styling, and specific visual characteristics are browser-specific. Some browsers may choose to add scrollbars for long lists.

If this isn't acceptable, you may have to forget the datalist and implement a ComboBox via Javascript. I believe JQuery has an autocomplete function that may be appropriate. ~Greg Scroll bar for Datalist in HTML5

I think this is still the case. You can probably do it in JQuery, but I'm not sure.

Hope this helps