jquerycssruby-on-railsjquery-select2

Select2 not working with modal

I'm having trouble getting select2 to work with my wrapbootstrap (Inspinia) theme.

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:

<div class="form-group">
  <label>Variant SKU</label>
  <select name="variant_sku_id" id="variant_sku_id" class="variant_sku_id form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    <option value="1">option1</option>
    <option value="2">option2</option>
  </select>
  <span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" style="width: 100px;">
  <span class="selection">
  <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">
  <span class="select2-selection__rendered" id="select2-variant_sku_id-container" title="option1"</span>
  <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
  </span>
  </span>
  <span class="dropdown-wrapper" aria-hidden="true"></span>
  </span> 
</div>

Select2 not working with modal

Solution

  • Fixed by adding this option when initializing select2: 

    dropdownParent: $(".modal-body")