title: Select2 doesn't work when embedded in a bootstrap modal
body: <p>When I use a select2 (input) in bootstrap modal, I can't type anything into it. It's like disabled? Outside the modal select2 works fine.</p>
  <p><img src="https://i.stack.imgur.com/h0I0M.jpg" alt="enter image description here" /></p>
  <p>Working example: <a href="http://jsfiddle.net/byJy8/1/" rel="noreferrer">http://jsfiddle.net/byJy8/1/</a>
  code:</p>
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div id=&quot;myModal&quot; class=&quot;modal hide fade&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;myModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
      &lt;div class=&quot;modal-header&quot;&gt;
          &lt;button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;×&lt;/button&gt;
          &lt;h3 id=&quot;myModalLabel&quot;&gt;Panel&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class=&quot;modal-body&quot; style=&quot;max-height: 800px&quot;&gt;          
        &lt;form class=&quot;form-horizontal&quot;&gt;
          &lt;!-- Text input--&gt;
          &lt;div class=&quot;control-group&quot;&gt;
              &lt;label class=&quot;control-label&quot; for=&quot;vdn_number&quot;&gt;Numer&lt;/label&gt;
              &lt;div class=&quot;controls&quot;&gt;
                  &lt;!-- seleect2 --&gt;
                  &lt;input name=&quot;vdn_number&quot; type=&quot;hidden&quot; id=&quot;vdn_number&quot;  class=&quot;input-large&quot; required=&quot;&quot;  /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;    
      &lt;/div&gt;
      &lt;div class=&quot;modal-footer&quot;&gt;
          &lt;button class=&quot;btn&quot; data-dismiss=&quot;modal&quot; aria-hidden=&quot;true&quot;&gt;Close&lt;/button&gt;
          &lt;button class=&quot;btn btn-primary&quot;&gt;Save changes&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <h2 id="js">JS</h2>
  <pre><code>$(&quot;#vdn_number&quot;).select2({
      placeholder: &quot;00000&quot;,
      minimumInputLength: 2,
      ajax: {
          url: &quot;getAjaxData/&quot;,
          dataType: 'json',
          type: &quot;POST&quot;,
          data: function (term, page) {
              return {
                  q: term, // search term
                  col: 'vdn'
              };
          },
          results: function (data) { // parse the results into the format expected by Select2.
              // since we are using custom formatting functions we do not need to alter remote JSON data
              return {results: data};
          }
      }
  });
  </code></pre>
  <p>answers:</p>
  <p>here you can find a quick <a href="https://stackoverflow.com/a/18487440/1251563">fix</a></p>
  <p>and here is 'the right way': <a href="https://stackoverflow.com/questions/18487056/select2-doesnt-work-when-embedded-in-a-bootstrap-modal/19574076#19574076">Select2 doesn&#39;t work when embedded in a bootstrap modal</a></p>