Selection text gets cut off because the select is too narrow

[mejibyte]

I have this on my HTML:

<select class="chzn-select">
  <option value="A">A</option> 
  <option value="B">B</option> 
  <option value="C">C</option> 
  <option value="D">D</option> 
</select>

I'm using this JavaScript to bind the library to the select:

$(".chzn-select").chosen();

And here's the final result:

• Closed:
• Open:

It looks fine though if I use:

<select class="chzn-select" style="width: 45px;">
  <option value="A">A</option> 
  <option value="B">B</option> 
  <option value="C">C</option> 
  <option value="D">D</option> 
</select>

I think you shouldn't need to set an explicit width. It would be nice if it worked out of the box.

[mejibyte]

@pfiller any thoughts?

[NickGreen]

I also am having this issue. We are thinking of applying Chosen to potentially thousands of drop-downs, and having to explicitly set the widths could break many of the layouts. Bumping this up in hopes that someone has come up with a solution to this, or at least ideas we could try out.

[doublesharp]

I too am having this issue with 0.9.11 - the only fix I have found is setting a min-width in CSS, however that has the reverse effect of having some select drop downs too large for their container.

[doublesharp]

Just found a bit more information - calling jQuery(document).ready(function() { jQuery('select').chosen() }); results in the SELECT elements being very narrow (Chosen is reporting them to be 47px wide). If I let the DOM finish load first and then manually call jQuery("select").chosen(); the widths are correct.

I then put the Chosen initialization into jQuery(window).on('load', function(){ jQuery("select").chosen(); }); and it is working as expected with the proper widths.

[pfiller]

Setting a width is the simplest solution by a wide margin.

Chosen tries to match the space that the select box it's replacing takes up. Trying to figure out the actual length of options would add complication that can easily be avoided simply by setting a width on the original select field (or in Chosen's options). I know it's not perfect for everyone, but it's impossible to make everything perfect for everyone.

[platever]

I don't like fiddling with 3rd party code, but like a few other people, I could not just set widths in an existing app. I ended up added 10px to the calculation of the Chosen container width and it seemed to fix this issue.

[0xadri]

@pfiller , setting a width is:

• not possible in an international website: the text will change when you are on different language version of your website, hence the required length of the selection.
• not future-proof: what happens if the text changes?

[0xadri]

A nice solution may be to provide an option to "add" pixels to the calculated width.
To then use this such as

$("select.cool-selector-thx-to-chosenjs").chosen({ addtowidth: "10px" });

[0xadri]

@doublesharp , I tried your experiment (let the DOM finish load first and then manually call $("select").chosen();). It does not work, the text does get cut off.
Either I missed something, either you did something in your test that you forgot to mention (either JS or CSS changes).

[doublesharp]

@adrien-be , it was a while ago but that's all that I did. Keep in mind that it might still cut off the text, I was just able to get Chosen to respect the CSS defined widths of the SELECT boxes when creating its dropdowns.

[cristinawithout]

This would be a nice option to have within the plugin.

Barring that though, here's a work-around to set the width of the element automatically based on the width of the placeholder text.

$('select').chosen().each(function() {
    var $elem = $(this).parent('.chosen-select');
    $elem.find('.chosen-container')
        .css({ 'width' : 'auto' });
        .css({ 'width' : $('.chosen-default').outerWidth() + 25});
});

The drop-down will be the same size as the select element and will wrap if text is longer.

If you wanted to set a specific width, you could do something like the following inside the each.

$elem.find('.chosen-drop').css({ 'width' : 250});


If you wanted the drop-down to always expand to the full length of its options' text, you could use something like the following. Though use that with caution, because if you have lengthy options, you could end up with drop-downs that run out of your layout.

$elem.find('.chosen-drop').css({ 'white-space' : 'nowrap', 'width' : 'auto'});


[vm-jade]

@pfiller - If chosen matches the width of the select element, shouldn't it account for the additional margins/padding that chosen uses? I would think that having the longest option fully visible would be preferable to exactly matching the original width (which hasn't been explicitly set in the first place).

E.g., http://jsfiddle.net/ng7yx2a0/
The longest option "Plane" is cut down to "P...".

It seems that adding a fixed number of pixels as others have suggested should solve the issue, but I guess its more complex than that if it hasn't been fixed already?

[yasnaderi]

This would be a nice option to have within the plugin.

Barring that though, here's a work-around to set the width of the element automatically based on the width of the placeholder text.

$('select').chosen().each(function() {
    var $elem = $(this).parent('.chosen-select');
    $elem.find('.chosen-container')
        .css({ 'width' : 'auto' });
        .css({ 'width' : $('.chosen-default').outerWidth() + 25});
});

The drop-down will be the same size as the select element and will wrap if text is longer.

If you wanted to set a specific width, you could do something like the following inside the each.
$elem.find('.chosen-drop').css({ 'width' : 250});

If you wanted the drop-down to always expand to the full length of its options' text, you could use something like the following. Though use that with caution, because if you have lengthy options, you could end up with drop-downs that run out of your layout.
$elem.find('.chosen-drop').css({ 'white-space' : 'nowrap', 'width' : 'auto'});

I use your code with a small modification:

$('.chosen-container').each(function() {
    var $elem = $(this);
    $elem.css({ 'width' : $elem.outerWidth() + 15});
});