Search code examples
jquery-select2bootbox

JQuery Select2 does not display properly inside bootbox dialog modal

When I use JQuery Select2 on a page it works fine. However, when it's inside a bootbox dialog modal, it doesn't display right.

enter image description here

Here is the jquery code I'm using...

$.ajax({
        type: 'GET',
        url: src,
        success: function (data) {
            if (allowed) {
                bootbox.dialog({
                    title: dialogTitle,
                    message: $('#altForm'),
                    onEscape: true,
                    show: false // We will show it manually later
                }).on('shown.bs.modal', function () {
                    $('#enterBtn').hide();
                    $('#userPwd').hide();
                    $('.app-ctrl').prop('disabled', true);
                    $('#altForm').show();
                }).on('hide.bs.modal', function (e) {
                    $('#altForm').hide().appendTo('body');
                }).modal('show');
                $('.boop').parents('.bootbox').removeAttr('tabindex');
                $('.boop').select2();
            }
        }
    });

I believe the code for Select2 dropdown is working because when I comment out the initializing line: $('.boop').select2(); the select dropdown turns into a regular dropdown. But I don't know why it's not displaying right.

Solution

  • I had the same situation a while ago and i managed to solve it with this:

    dialog.on('shown.bs.modal', function() {
  dialog.removeAttr("tabindex");
});

    where dialog is my bootbox modal dialog. You just need to remove tabindex attribute from the dialog itself. This way it will work as expected (like it is working in a normal page).