Select2 inside Bootstrap Modal does not size properly and search does not work

Having the following HTML

<form id="frmFoo" ...>
  <div class="form-group">
    <label for="txtFoo" class="col-sm-2 control-label">Foo Field :</label>
      <div class="col-sm-6">
        <select id="txtFoo" class="form-control" placeholder="Foo Value"></select>
      </div>
    </div>
  </div>
</form>

will not display the <select> element’s width properly as the form-control class is completely ignored when generating the widget’s UI.

** Edit **

Also, there are other discrepancies with Bootstrap’s UI, such as the focus’ borders, that are not respected and cause inconsistent UI.

[yanickrochon]

The solution is to document dropdownParent for the dropdown input search issue. As for the width, I’m not sure what would be the proper way (I have not dug into the sources much since the last major release).

At the moment, I temporarily fix this by manually setting width: 100%; to the <select> element.

[kevin-brown]

The solution is to document dropdownParent

It just hit me that this is already documented.

https://select2.github.io/options.html#dropdownParent

The Bootstrap issue is pretty well documented at https://github.com/select2/select2/issues/600.