title: Select2 not working with modal
body: <p>I'm having trouble getting select2 to work with my wrapbootstrap (Inspinia) theme.</p>
  
  <p>The options appear "under" my modal, making them unselectable (see screenshot below). I think Select2 creates a bunch of wrappers that are getting in the way. How do I fix this? When I inspect the element, this is what I see:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label&gt;Variant SKU&lt;/label&gt;
    &lt;select name="variant_sku_id" id="variant_sku_id" class="variant_sku_id form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true"&gt;
      &lt;option value="1"&gt;option1&lt;/option&gt;
      &lt;option value="2"&gt;option2&lt;/option&gt;
    &lt;/select&gt;
    &lt;span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100px;"&gt;
    &lt;span class="selection"&gt;
    &lt;span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-variant_sku_id-container" aria-owns="select2-variant_sku_id-results" aria-activedescendant="select2-variant_sku_id-result-3g9n-1"&gt;
    &lt;span class="select2-selection__rendered" id="select2-variant_sku_id-container" title="option1"&lt;/span&gt;
    &lt;span class="select2-selection__arrow" role="presentation"&gt;&lt;b role="presentation"&gt;&lt;/b&gt;&lt;/span&gt;
    &lt;/span&gt;
    &lt;/span&gt;
    &lt;span class="dropdown-wrapper" aria-hidden="true"&gt;&lt;/span&gt;
    &lt;/span&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/s0KfW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s0KfW.png" alt="Select2 not working with modal"></a></p>