4

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?

Mav2287
  • 796
  • 2
  • 9
  • 22
  • 2
    Can we have a fiddle? – otajor Jun 14 '16 at 09:27
  • 2
    Can you please provide a link to your environment ? It is a bit difficult to guess what's happening. – DreamWave Jun 14 '16 at 09:33
  • @MBaas is this is what you are looking for [Fiddle](https://jsfiddle.net/4tee5sfh/23/)? – Zeeshan Jun 14 '16 at 09:35
  • your fiddle is what I want it to do however I want my chosen dropdown to behave that way what tends to happen is that it will only be as wide as the option selected and then it will show some of it and ... like for example "united s..." instead of united states – Mav2287 Dec 15 '16 at 00:24

1 Answers1

3

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.

DreamWave
  • 1,934
  • 3
  • 28
  • 59
  • Thanks - it is nice that this avoids the word-wrap, but it's hard to read the list of items. The idea is that this list should automatically get sufficient space to display the items. – MBaas Jun 14 '16 at 09:42
  • @MBaas do you mean you wish to allow the items to be on multiple lines ? – DreamWave Jun 14 '16 at 09:44
  • Sorry for the confusion! No, I'd like to see one item per line - fully visible. (consciously ignoriging worst cases, but for reasonable stuff like "Car", "Train", "Spaceship" etc.) - so all the risk of getting silly display is up to the user... – MBaas Jun 14 '16 at 09:46
  • Better, thanks ;-) The only problem is when you selected the "long long" one, - but otoh this can be solved by selecting the div's width appropriately. So, as far as I am concerned, this takes care of the issue - thanks for the quick solution! I have upvoted your reply, must wait till tomorrow before I can award the bounty... – MBaas Jun 14 '16 at 09:52
  • Thank you. In my case, I had to add a `display: table-inline;` statement on the second block. I still have an issue because scroll bar width is not being compensated there. – sergiol Dec 20 '22 at 15:28