Part of the selected text is hidden when selecting an option

Question

I stumbled upon a curiosity.

I have a

select

box that allows overflow with an option that exceeds the width of the

select

box:

When I select the

option

, however, part of the text disappears:

This appears to be related to the

option

's width. If I increase the

option

's width, I can select more of the text. However, even if I set it to 100% (of the

select

box), I still can't select all of the text.

complimentary jsfiddle.

Is this something obvious to the CSS experts out there?

After a little more thinking:

width: 100%

obviously won't work. Am I forced to use JavaScript to dynamically set the width of the options to the max width?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Not very good solution

You can give display: inline to your option and it's size will be based on content length (works fine in Chrome). However this won't work if you have more than 1 option, because it will stack your options horizontally.

select {
  width: 20%;
  overflow: auto;
}

option {
  display: inline;
}

<select size="3">
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>    
</select>

This solution is totally OK

You can use float: left on option, it will do the trick (was tested in Chrome):

select {
  width: 20%;
  overflow: auto;
}

option {
  float: left;
}

<select size="3">
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>    
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
</select>

Part of the selected text is hidden when selecting an option

Not very good solution

This solution is totally OK

Sign up