jaimebennett
You have to enable the Select2 component when the modal is shown by utilizing this events:
$("#modal-container").on("show.bs.modal", function (event) {
// re-render all select2 enabled dropdowns
$(".select2").select2({
dropdownParent: $("#modal-container")
});
});
Notice dropdownParent
property that is set to the id
value of the div
that you are using for your modal, e.g.:
<div id="modal-container" class="modal fade" tabindex="-1" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-lg">
<div class="modal-content">
</div>
</div>
</div>
In my example I have set data-backdrop
to static
as I did not want my dialog to be closed by clicking outside of the area, if you want to retain the original behavior of the modal dialog then simply remove this attribute.
Hope this helps,
Ashley