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>

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?

• javascript
• html
• css

• 1 No need for screen shots and Fiddles, when you can post a running version of your code right here. – Scott Marcus Commented Jun 29, 2017 at 21:00
• @ScottMarcus: Thanks scott. I didn't know that. – AntiVirus Commented Jun 29, 2017 at 21:02
• 1 Yes, you may have images - it helps show the issue. Also JSFiddle may allow more stuff than the snippets here, be do post the code in a snippet too. @ScottMarcus - e on – mplungjan Commented Jun 29, 2017 at 21:02
• In this case JSFiddle doesn't add any value and simply running the snippet shows the visual. – Scott Marcus Commented Jun 29, 2017 at 21:03
• 2 It shows the visual if you have the same browser as OP so an image is a great idea – mplungjan Commented Jun 29, 2017 at 21:04

2 Answers 2

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>

Horizontal scrolling for <select> elements is buggy in Edge/Chrome, and pletely 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.