Scroll bar for Datalist in HTML5
I am having trouble with datalist
in HTML5, i have 10000 rows to display in my option
values, I am populating from mysql using PHP, for some reason I can't see any scrollbar, i tried overflow:scroll
setting height
and width
but no help. Please help me!
<div class="container">
<form action="NutritionDataBank.php" method="post">
<label>Select NDBNum:</label>
<input list="ndbnum" id="ndb" placeholder="e.g.1001" size="20" multiple>
<datalist id="ndbnum">
<?php
//...
while($row = mysqli_fetch_array($result)){
echo "<option value=$row[ndbNum]></option>";
}
?>
</datalist>
</form>
</div>
Solution 1:
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.