I'm using Select2 in a modal but it isn't working quite right, as you can see here:

The results appear behind the modal. How can I fix this? I've read simular posts but all talk about removing tabindex, something that I don't have in my code so I don't know how to fix it. Here's my code:

<div class="remodal shadow" data-remodal-id="keuze" data-remodal-options="closeOnOutsideClick: false">
    <button data-remodal-action="close" class="remodal-close"></button>
    <div class="panel-header">Kies uw type logboek</div>
    <div class="modal-body">
        <select id="select" class="searchselectstyle select2"></select>
        <button data-remodal-action="cancel" class="remodal-cancel mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect send">Aanmaken</button>
    </div>
</div>

<script type="text/javascript">
    token = '{{csrf_token()}}';
    $(document).ready(function() {
        $('#select').select2({
            ajax: {
                type: "POST",
                url: "ajax/getlogtypes",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page,
                        '_token' : token
                    };
                },
                escapeMarkup: function (markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1
            }
        });
    });
</script>

I'm using Select2 in a modal but it isn't working quite right, as you can see here: https://gyazo.com/a1f4eb91c7d6d8a3730bfb3ca610cde6

The results appear behind the modal. How can I fix this? I've read simular posts but all talk about removing tabindex, something that I don't have in my code so I don't know how to fix it. Here's my code:

<div class="remodal shadow" data-remodal-id="keuze" data-remodal-options="closeOnOutsideClick: false">
    <button data-remodal-action="close" class="remodal-close"></button>
    <div class="panel-header">Kies uw type logboek</div>
    <div class="modal-body">
        <select id="select" class="searchselectstyle select2"></select>
        <button data-remodal-action="cancel" class="remodal-cancel mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect cancel">Cancel</button>
        <button data-remodal-action="confirm" class="remodal-confirm mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect send">Aanmaken</button>
    </div>
</div>

<script type="text/javascript">
    token = '{{csrf_token()}}';
    $(document).ready(function() {
        $('#select').select2({
            ajax: {
                type: "POST",
                url: "ajax/getlogtypes",
                dataType: 'json',
                data: function (params) {
                    return {
                        q: params.term, // search term
                        page: params.page,
                        '_token' : token
                    };
                },
                escapeMarkup: function (markup) {
                    return markup;
                }, // let our custom formatter work
                minimumInputLength: 1
            }
        });
    });
</script>

• javascript
• jquery
• ajax
• jquery-select2

• 3 Inspect the DOM. You need to change the CSS of the select2 plugin so that the z-index of the element containing the option list is higher than the zIndex of the modal. – Rory McCrossan Commented Mar 30, 2016 at 14:03

4 Answers 4

After inspecting the DOM as Rory McCrossan suggested, I figured that the generated span elements by Select2 appeared with a lower z-index. I fixed it by adding the following to my code:

.select2-container{
    z-index:100000;
}

The problem is related to the select2's parent. When the select2 is created, it's parent is the html body (not the modal). The solution is the instantiate the select2 as follows:

$('.modal .select2').select2({
    dropdownParent: $('.modal')
});

See here for more information: [https://select2.org/troubleshooting/common-problems]

This issue occurs because Bootstrap modals tend to steal focus from other elements outside of the modal. Since by default, Select2 attaches the dropdown menu to the element, it is considered "outside of the modal".

To avoid this problem, you may attach the dropdown to the modal itself with the dropdownParent setting:

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
...
<select id="mySelect2">
    ...
</select>
...

<script>
    $('#mySelect2').select2({
        dropdownParent: $('#myModal')
    });
</script>

for more info: Select2 does not function properly when I use it inside a Bootstrap modal

The solution above couldn't work in my case. But I solved it by adding the css below:
.select2-drop {z-index: 99999;}