adding missing display:block

[juristr]

Otherwise bootstrap's "display:block" is overwritten by select2's css:

.select2-container {
   ...
   display: inline-block;
   ...
}

This commit seems to fix the issue.

[juristr]

What I also noticed is that now with Bootstrap3 all .form-control fields have width:100%. Select2 however sets a style="width:100px" programmatically in the code. That'd need a fix as well. Anyway, in the mean time, if you add

.select2-container.form-control {
    ...
    width: 100% !important;
    ...
}

...to my changes it works...although it's quite hacky...

[fk]

Thanks Juri for catching this!

I got the feeling that the one or the other should fix the small gap to the right of Select2 when used in the context of a Bootstrap "Input Group" and its "Button Addons" but not within Bootstrap's grid (see screenshot and the demonstrations Input Groups section and its "Select2 append"/"Select2 multi append" examples … maybe the display:block may already suffice).

Please allow me another day or two to properly test and port back to Sass and LESS; got a small fix regarding the loading indicators position rotting away in a local feature branch, too … proper tests pending :/

[fk]

Ah, almost forgot the container width – I'll give it a shot (all purely theoretic), eyes almost shut:

As far as the project demo pages go, I recall they do not alter Select2's default behavior for width ("Copies the value of the width style attribute set on the source element."); the demos source elements have no such attribute set, so nothing gets copied there – but as Select2 copies the source elements CSS-classes to its container element and all the former got a Bootstrap .form-control assigned, the Select2 container inherits the original elements width: 100%.

From what I currently understand, this would allow for a fixed width to be set either via inline CSS or via an additional CSS class – however that may turn out regarding the various different Bootstrap scenarios.

Maybe you are using Select2 with width: 'element', 'resolve' or a value?

Another thought, regarding overriding the inline CSS style via just the !important: I haven't had to do this myself in quite a while plus I'm not sure how this behaves in case of styles set via JS or in current browsers, but I recall it required an additional attribute selector ([style]) to override inline CSS styles (see here or here).

I'll leave it at that for the moment – could you check and find out where those 100px are coming from?

Note to self: Document use of .form-control.

[juristr]

Regarding the width, I also noticed that the select2 takes all style indications from the source element it is bound to and so I double-checked that there wasn't any kind of style indication on my select2 input fields.
By what I understood so far, the width is determined by the Bootstrap's .form-control which sets it to 100%, but apparently by using select2 on a <input type="hidden"> it doesn't correctly inherit that width..

[fk]

Finally got around merging (backporting to Sass/LESS sources, cross-browser testing) this – sorry for taking that long @juristr (there really have been personal reasons, but I'll spare us the sad part).

display:block really fixes the small gap mentioned/displayed in my first comment – thanks again Juri!