pushkin pushkin - 3 years ago 81
CSS Question

Part of the selected text is hidden when selecting an option

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?

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download