Menu
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>
780
Suppose we want to add a scroll bar option in HTML, use an “overflow” option and set it as auto-enabled for adding both horizontal and vertical scroll bars. If we want to add a vertical bar option in Html, add the line “overflow-y” in the files.
The datalist tag is introduced in HTML5. The <datalist> tag should be used with an <input< element that contains a "list" attribute. The value of "list" attribute is linked with the datalist id.
Like select elements, the datalist element has very little flexibility in styling. You cannot style any of the suggested terms if that's what your question was asking. Browsers define their own styles for these elements.
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
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.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
