Part of the selected text is hidden when selecting an option

user_3479456 0
Viewed 108

I stumbled upon a curiosity.

I have a select box that allows overflow with an option that exceeds the width of the select box:

enter image description here

When I select the option, however, part of the text disappears:

enter image description here

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?

css html
2 Answers

Use float: left on option (tested in Chrome):

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

option {
  float: left;
}
<select size="3">
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>    
    <option>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</option>
</select>

user_60536540

BEST ITERATION OF FIX AT BOTTOM

If you are looking for browser consistency it is probably best to use a plugin. I would recommend using a plugin like chosen.

if you are ok with preventing side scrolling you can simply add

overflow-x: hidden;

to the select box.

I actually found that if you removed the size attribute from the select tag you were left with a completely different rendering of said tag. Not sure how it happened but you should try it and see if that is a closer version of what you are looking for.

The best fix is probably to add

overflow: auto;

to your option tag.

this cutoff is caused by an overflow hidden implicitly on the option tag

user_26907340
Related