Selected Options disappear in a multiple drop-down select tag with scroll bar in HTML

Question

I have the following multiple drop down select tag

.Something {
  overflow-x: scroll;
  width: 16%;
}

<select multiple size="5" class="Something">
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
</select>

So whenever I select an option the text towards the right of it disappears.

Like this

I have such several drop downs in my web portal. I don't want the option text to disappear. Can this be done using HTML or CSS rather than writing a customized JavaScript code? If so how?

Answer 1

Not sure why it does that, I can reproduce in Chrome.

This seems to fix it. Setting float: left; min-width: 100%; on the <option> element style.

float: left destroys the default block formatting context behaviour of the <option> tags in the <select>. min-width: 100% just makes it a little more aesthetically pleasing, it ensures that even the <option> tags which have content shorter than the width of the <select> are "fully highlighted" when selected.

P.S. This fixes the issue for Chrome and IE11, won't fix it for IE10- and Firefox as they don't support horizontal scrolling on a <select> element at all :)

.Something {
  overflow-x: scroll;
  width: 16%;
}

option {
  float: left;
  min-width: 100%;
}

<select multiple size="5" class="Something">
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Optionfghfghfgdgdffyuujkyujg 1</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
  <option>Option n fgnfn ghdnghd ngdh 2</option>
</select>

Answer 2

Horizontal scrolling for <select> elements is buggy in Edge/Chrome, and completely unsupported in Firefox.

A work-around supported all browsers would be to simply wrap it in a <div> and apply some of your CSS there instead:

.Something {
  overflow-x: auto;
  overflow-y: auto;
  width: 20%;
  height: 100px;
}

.Something > select {
  overflow-y: hidden;
}

<div class="Something">
    <select multiple size="6">
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
      <option>Optionfghfghfgdgdffyuujkyujg 1</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
      <option>Option n fgnfn ghdnghd ngdh 2</option>
    </select>
</div>

Some changes had to be made for this to work. The size attribute of your <select> must match the number of options, and your <div> must have a set height.