How to make a html datalist overflow?

Question

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 not sure where to do it.

<form class="gameForm" method='POST' action='/game'>
        <h2>CHOOSE A CATEGORY</h2>
        <input type="text" list="category" name="category" placeholder="Category">
            <datalist id="category">
                <option value="any">Any Category</option>
                <option value="9">General Knowledge</option>
                <option value="10">Entertainment: Books</option>
                <option value="11">Entertainment: Film</option>
                <option value="12">Entertainment: Music</option>
                <option value="13">Entertainment: Musicals &amp; Theatres</option>
                <option value="14">Entertainment: Television</option>
                <option value="15">Entertainment: Video Games</option>
                <option value="16">Entertainment: Board Games</option>
                <option value="17">Science &amp; Nature</option>
                <option value="18">Science: Computers</option>
                <option value="19">Science: Mathematics</option>
                <option value="20">Mythology</option>
                <option value="21">Sports</option>
                <option value="22">Geography</option>
                <option value="23">History</option>
                <option value="24">Politics</option>
                <option value="25">Art</option>
                <option value="26">Celebrities</option>
                <option value="27">Animals</option>
                <option value="28">Vehicles</option>
                <option value="29">Entertainment: Comics</option>
                <option value="30">Science: Gadgets</option>
                <option value="31">Entertainment: Japanese Anime &amp; Manga</option>
                <option value="32">Entertainment: Cartoon &amp; Animations</option> 
            </datalist>
         <h2>NUMBER OF QUESTIONS</h2>
        <input class="number" name='number_of_questions' type='number' min='1' max="50" placeholder='Number of Questions' required />
        <h2>DIFFICULTY</h2>   
        <input list="difficulty" name="difficulty" placeholder="Difficulty">
            <datalist id="difficulty">
                <option value="easy">
                <option value="medium">
                <option value="hard">
            </datalist>
    
        <input class="buttons" type='submit' value='ADD GAME!' />
    </form>

Have you done some research? First hit: https://stackoverflow.com/questions/43491711/how-to-give-scrolling-effect-in-datalist-dropdown — JeroenE, Aug 03 '17 at 11:15
Unfortunately there is no styling and limit for html5 datalist. However you can use select and set its size according to your need — Atilla Arda Açıkgöz, Aug 03 '17 at 11:15

score 0 · Answer 1 · answered Aug 03 '17 at 11:30

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

score -1 · Answer 2 · answered Aug 03 '17 at 11:20

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

How to make a html datalist overflow?

2 Answers2

Linked