Select2 width fixed to 100px in tags mode, truncates placeholder

[vercotux]

When setting multiple to true and specifying a placeholder containing text that is longer than 100px, it will be truncated by a CSS rule set by Select2 javascript.

This seems to be an upstream issue with Select2, but they are not doing anything to fix it. Their bug report is closed and the workarounds do not work with this widget. We need a solution that works with this widget.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/38178729-select2-width-fixed-to-100px-in-tags-mode-truncates-placeholder?utm_campaign=plugin&utm_content=tracker%2F530581&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F530581&utm_medium=issues&utm_source=github).

[hdewaart]

Same issue as above here.

[vercotux]

I realized this issue belongs in yii2-widget-select2. @kartik-v Possible to move?

Some additional findings:

The problem lies exactly in Select2's resizeSearch() method.

As you can see, when the placeholder is set, the script overrides the CSS style with the width it gets using jQuery's innerWidth() from the .select2-selection__rendered container class. This seems to fail in some cases (eg. when Select2 is inside a hidden modal window).

One workaround is to override the CSS with a fixed width:

.select2-selection__rendered {
    width: 500px !important;
}

[eugeneborodkin]

Even with the '__rendered' CSS above the Input was still defaulting to 100px, so I made it more precise to target the Input directly,

.select2-search--inline input {
    width: 700px !important;
}