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/

<styletype="text/css"media="screen">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}
    </style><!-- HTML code --><divclass="combobox"><inputtype="text"name="comboboxfieldname"id="cb_identifier"><span>▼</span><divclass="dropdownlist"><a>Item1</a><a>Item2</a><a>Item3</a></div></div><!-- JS code --><scripttype="text/javascript"charset="utf-8"src="combobox.js"></script><scripttype="text/javascript"charset="utf-8">var no = newComboBox('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