Make chosen as long as longest option

Question

I am looking for a way to set the width of a chosen dropdown to the width of the longest option it has. The problem I have now is that when you pick a short item it will then wordwrap the other option and make the dropdown the same width as the option you picked. After some CSS playing I figured out how to turn off wordwrap for the results and removed width:100% so the results would be as wide as the longest option. This didn't have any affect on the dropdown itself though. Anyone know how to do this?

Answer 1

You should provide .chosen-drop with an automatic width and remove the word-wrap from the "li" inside chosen. Here is an example: http://codepen.io/dreamwave/pen/VjaEYm

And the CSS:

.chosen-results li {
  white-space:nowrap;
}
.chosen-container .chosen-drop {
  width:auto;
}

I hope I understand the issue correctly.