Placeholder width bug with multiselect2

[Arkayus]

In the lastest version of select2, If a select is not visible when select2 init it, the select2 will not have the width of the select but will have always 100% and the placeholder will always have 100px. Why ?

Also, i'm able to reproduce it on your website, in the examples section.

[kevin-brown]

I wasn't able to reproduce this in the examples page, but I also may have misinterpreted the issue.

---

Can you expand upon the issue you are facing by adding a few more pieces of information to your bug report?

• What steps can be used to reproduce the issue?
• What is the bug and what is the expected outcome?
• What browser(s) and Operating System have you tested with?
• Does the bug happen consistently across all tested browsers?
• Can you reproduce this issue on the examples page?
• What version of jQuery are you using? And what version of Select2?
• Are you using Select2 with other plugins?

The contributing guide contains a useful section with a few questions which can help us track down the bug and speed up the process of finding a fix for it. The creation of an isolated test case would also be useful.

[sudheerkaushik]

Here is your jsfiddle:

https://jsfiddle.net/km1adzaq/

The second field-set doesn't shows full placeholder

[maodei]

Yes, I saw this problem too. An example is to put a select2 control in a tab which is initially not active, and then when activate that tab, you see the select2 placeholder only partially displayed.

Is there any fix or workaround available?

Thanks

@kevin-brown

[dellch]

Here is a simple example of the problem http://jsfiddle.net/say2rwmt/4/ using bootstrap tabs to initially hide the select2. When you click the second tab, you'll see the placeholder is truncated.

Note: as soon as you enter text, and backspace, the placeholder resets to it's correct size.

A workaround for this specific instance is to hook into the tab shown event and (re)initialize select2:
$('a').on('shown.bs.tab', function(){ $(".s2").select2(); });

[dellch]

Haven't had time for much testing but possible fix/workaround around line 2005 (in select2.min.js):

Original fiddle (with problem): http://jsfiddle.net/say2rwmt/4/
Updated fiddle: http://jsfiddle.net/br917x0b/3/

Original:

if (this.$search.attr('placeholder') !== '') {
    width = this.$selection.find('.select2-selection__rendered').innerWidth();
} else {

changed to:

if (this.$search.attr('placeholder') !== '') {
    width = this.$element.width() === 1 ? this.$selection.width() : this.$element.width();
} else {

[maodei]

$('a').on('shown.bs.tab', function(){ $(".s2").select2(); });
this workaround works while
if (this.$search.attr('placeholder') !== '') { width = this.$element.width() === 1 ? this.$selection.width() : this.$element.width(); } else {
dose not work.

[SgtOddball]

I've come across the same issue too, except I'm drawing the select2 elements on page load.

I've noticed also that even if you replace the placeholder's length of 100px with 100% it still doesn't display correctly since the wrapping li doesn't span the whole line (specifically the li with the select2-search select2-search--inline which requires the following class in the CSS to have width:100% applied .select2-container .select2-search--inline).

The remaining issue then is that the final input box inside of the above li is being set to 100px via inline styling and thus can't be overwritten in the CSS file. I'll look to see if I can spot where it's being applied to the input.

[SgtOddball]

Also worth noting that If you select a value then remove it, then the correct width does get applied to the placeholder instead of the 100px.

Could it be that the width is being gotten before the select box has been drawn on the DOM leading to a default value being used instead? So that when the values are changed and then blanked, the select box is present and a correct width can then be applied? Just a hunch at any rate.

Finally as a side note, I tried seeing exactly where the placeholder triggers the width value functions (of which there are a few) but the only one that default to 'px' weren't being triggered. Quite confusing really.

[Cruiser13]

Same issue, my css solution:
.select2-search__field { width: 100% !important; }

[sourovroy]

Thanks @dellch , i fixed this in my end by your code.
Thank you

[EricJZell]

@Cruiser13 's solution worked for me, but I also had to include the li element:

.select2-search--inline, .select2-search__field { width: 100% !important; }

[alexweissman]

This is a duplicate of #291, so please continue any further discussion there.