0

I have created an input field where users can type in whatever they want to search for. I have also created a drop down list but the list exceeds the page and only few items are shown.

So, I also wanted to create scroll bar to easily access all the items. The code looks like below and there are almost 200 items.

Thank you in advance.

body {
  background: #2196F3;
  font-family: "calibri", sans-serif;
  color: #FAFAFA;
  margin: 0;
}

#head {
  margin: 0;
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid #1C2833;
}

.box {
  height: 30px;
  width: 250px;
  font-size: large;
  color: #17202A;
  border-radius: 5px;
  outline: none;
  border: none;
  padding: 12px;
}
<div>
  <p>
    <form id="form1">
      <input class="box" list="Country" name="Countries" placeholder=" Country">
      <datalist id="Country">
        <option value=" Afghanistan">
        <option value=" Albania">
        <option value=" Algeria">
        <option value=" American Samoa">
        <option value=" Andorra">
        <option value=" Angola">
        <option value=" Anguilla">
        <option value=" Antigua and Barbuda">
        <option value=" Argentina">
        <option value=" Armenia">
        <option value=" Aruba">
        <option value=" Australia">
        <option value=" Austria">
        <option value=" Azerbaijan">
        <option value=" Bahamas">
        <option value=" Bahrain">
        <option value=" Bangladesh">
        <option value=" Barbados">
        <option value=" Belarus">
        <option value=" Belgium">
        <option value=" Belize">
        <option value=" Benin">
        <option value=" Bermuda">
        <option value=" Bhutan">
        <option value=" Bolivia">
        <option value=" Bosnia and Herzegovina">
        <option value=" Botswana">
        <option value=" Brazil">
        <option value=" British Virgin Islands">
        <option value=" Brunei">
        <option value=" Bulgaria">
      </datalist>
    </form>
  </p>
</div>
Bumhan Yu
  • 2,078
  • 1
  • 10
  • 20
Erog
  • 9
  • 1
  • 1
  • 7
  • 1
    Need to try and format your code better here, also can you show the CSS you currently have? The CSS overflow property will automatically add a scroll bar if the content overflows an element's box. – cela Jul 24 '17 at 18:40
  • 2
    By default a `datalist` provides a scrollbar. Is your CSS affecting something? – Vivek Jain Jul 24 '17 at 18:42
  • 1
    Possible duplicate of [Scroll bar for Datalist in HTML5](https://stackoverflow.com/questions/23042745/scroll-bar-for-datalist-in-html5) – Muhammad Jul 24 '17 at 18:48

3 Answers3

1

Please, check this snippet:

<form action="somepage.php" method="get">
 <input list="Country" name="Country">
 <datalist id="Country">
  <option value=" Afghanistan">
  <option value=" Albania">
  <option value=" Algeria">
  <option value=" American Samoa">
  <option value=" Andorra">
  <option value=" Angola">
  <option value=" Anguilla">
  <option value=" Antigua and Barbuda">
  <option value=" Argentina">
  <option value=" Armenia">
  <option value=" Aruba">
  <option value=" Australia">
  <option value=" Austria">
  <option value=" Azerbaijan">
  <option value=" Bahamas">
  <option value=" Bahrain">
  <option value=" Bangladesh">
  <option value=" Barbados">
  <option value=" Belarus">
  <option value=" Belgium">
  <option value=" Belize">
  <option value=" Benin">
  <option value=" Bermuda">
  <option value=" Bhutan">
  <option value=" Bolivia">
  <option value=" Bosnia and Herzegovina">
  <option value=" Botswana">
  <option value=" Brazil">
  <option value=" British Virgin Islands">
  <option value=" Brunei">
  <option value=" Bulgaria">
 </datalist>
 <input type="submit">
</form>

There's something different in your case?

EDIT This is what I see in Firefox enter image description here

This is what I see in Chrome enter image description here

EDIT 2

From my knowledge, you currently can't style the <datalist> tag.

yanntinoco
  • 152
  • 7
  • His issue is that it will not add a scrollbar to go through each country, the list more than likely fills up the entire page. This one does not either. That is odd in Mozilla, there is no dropdown. While in Chrome, there is a dropdown but no scrollbar. – cela Jul 24 '17 at 18:54
  • I understand and believe that's currently isn't possible to do that... why not try a Combobox? – yanntinoco Jul 24 '17 at 19:08
  • Yes I want to achieve exactly the same thing in chrome, like the one shows in firefox. – Erog Jul 25 '17 at 09:13
1

It is not possible to change the height of an option you can only change the font size of option

  #country option{ font-size:5px}

check this for more informationa link

Azer8
  • 539
  • 8
  • 18
0

Try this:

#country option {
  overflow:scroll;
 }

try without and with option, not sure how that will make a difference.

Adam H
  • 152
  • 9