JQuery Select2 does not display properly inside bootbox dialog modal

Question

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.

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.

overwrite enforceFocus() which registers the event on the modal. $.fn.modal.Constructor.prototype.enforceFocus = function() {}; — Mannan Bahelim, Feb 22 '17 at 13:27
This solution did not work. However, when I copied the .css files inside the form it worked! Why is this necessary? — Keith Harris, Feb 22 '17 at 16:36
Select2 needs the elements to which it's being applied to be visible. You'll need to move `$('.boop').select2();` inside a handler for the `shown.bs.modal` event (show**n**, not show - show is handled just before the modal becomes visible). — Tieson T., Feb 23 '17 at 05:49
The problem is NOT $('.boop').select2(); this works either inside or outside the shown.bs.modal. The real problem is the inability to "see" the select2 css files. When I include it inside them form it works! I don't know why it can't read it from the page's section. — Keith Harris, Feb 23 '17 at 20:02

score 11 · Accepted Answer · answered Mar 05 '17 at 10:03

11

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).

answered Mar 05 '17 at 10:03

Ahmet

1,045
13
28

2

this should be the answer. Thanks! – Braian Mellor May 11 '18 at 14:14
1

Thank you. This helped select2 start registering the keystrokes. – miCRoSCoPiC_eaRthLinG Jan 24 '19 at 14:35

score 3 · Answer 2 · answered Mar 31 '18 at 03:51

I'll just work if you initialize your select2 componet on "shown.bs.modal" method:

bootbox.dialog({
                title: dialogTitle,
                message: $('#altForm'),
                onEscape: true,
                show: false // We will show it manually later
            }).on('shown.bs.modal', function () {
                $('.boop').select2(); <---- Place it in here!!!
                $('#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');

Thank you - this helped get the select2 initialize properly. And the answer right below helped take care of the keystrokes not registering issue. — miCRoSCoPiC_eaRthLinG, Jan 24 '19 at 14:35

score 0 · Answer 3 · answered Oct 09 '18 at 13:13

   var box =  bootbox.dialog({
       message:"<div class='col-md-4 form-group m-t-menos-15'>" +
       "            <div class='input-group'>" +
       "                <label class='control-label' for='motivo'>Motivo</label>" +
       "                <select class='select-2 motivo_cancela' id='motivo' name='motivo'>" +
       "                    <option> 1</option>" +
       "                    <option> 2</option>" +
       "                </select>" +
       "            </div>" +
       "          </div>",
       title: "Cancelamento da viagem",
       animate: true,
       buttons: {
           'confirm': {
               label: 'Confirmar',
               className: 'btn-info '
           },
           'cancel': {
               label: 'Fechar',
               className: 'btn-danger'
           }
        },
        callback: function(result) {
                if (result) {
                    sendPostRequest(
                        'solicitacaomonitoramento/cancelar',
                        {id: data.id},
                        function (xhr) {
                            BootstrapAlert.success(xhr.msg);
                            tabelaSolicitacaoMonitoramento.ajax.reload();
                        },
                        function (xhr) {
                            var erros = $.parseJSON(xhr.responseText);
                            BootstrapAlert.error(erros.erro);
                        }
                    );
                }
        }
   });

    box.on('shown.bs.modal', function(){
        $('.motivo_cancela').select2();

    })

Please don't post code-only answer, include an explanation and background. — Mark Rotteveel, Oct 09 '18 at 18:04
A good answer has a better explanation [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) — Narendra Jadhav, Oct 09 '18 at 18:12

score 0 · Answer 4 · answered Apr 12 '21 at 16:10

I had the same error, this was the solucion for my

  on('shown.bs.modal', function() {
    $('#estacion').select2({ //includ the function select 2 on show modal
      width: "100%",//i put width 100% to show in all the modal
      dropdownParent: $('#sistemas')//this is the solucion to show the select options, my select2 is inside a table whit id sistamas 
     });
  })

All code

  $("#idbutton").on("click", function(e) {
   let url = $("#base_url").val() + "example/example/urlBootbox";
   $.get(url, {}, function(data) {

  modalPrenomina = bootbox.confirm({
    title: "Registrar Prenomina",
    message: $(data),
    size: "middle",
    show: false,
    buttons: {
      confirm: {
        label: '<span class="glyphicon glyphicon-floppy-saved" ></span> Guardar',
        className: 'btn-sm btn-primary btn-sm'
      },
      cancel: {
        label: '<span class="glyphicon glyphicon-remove" style="margin-right:5%;"></span> Cancelar',
        className: 'btn-sm btn-default btn-sm'
      }
    },
    callback: function(result) {

      if (result) {
        $("#frmPrenomina").submit();
        return false;
      }
    }
  }).on('shown.bs.modal', function() {
 
    $('#estacion').select2({
      width: "100%",
      dropdownParent: $('#sistemas')
     });
    



  }).on('hide.bs.modal', function(e) {

  }).modal('show');
})
})

HTML CODE

    <table class="table table-striped tooltip-demo" id="sistemas" style="margin-bottom: 0px;">
        <tbody>
            <div class="col-sm-12">
                <h3 class="m-t-none m-b"></h3>
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class=" form-group  "><label class="col-sm-12 col-form-label">Empresa *</label>
                            <div class="col-sm-12">
                                <div class="inputGroupContainerfrm inputGroupContainer">
                                    <div class="input-group" id="divSelectE">
                                        <span class="input-group-addon" id="style_spam_empresa"><i class="fa fa-building"></i></span>
                                        <select class="chosen-select" id="estacion" name="estacion"  onChange="myChangeEstacion(this);">
                                            <option value="" disabled selected>Elige una opción</option>
                                            <?php foreach ($estaciones as $item) : ?>
                                                <option value="<?php echo $item->id ?>"><?php echo $item->alias ?></option>
                                            <?php endforeach;  ?>
                                        </select>
                                    </div>
                                </div>
                                <br>
                            </div>
                        </div>
                    </div>
                    <!--
                        Nota: Se va descomentar esta linea cuando se implemente lo de los departamentos
                              y se va incluir esta linea dentro de la etiqueta select onChange="revisarDocumento(this);" y se va quitar onChange="myChangeEstacion(this);"
                         <div class="depa" id="depa">
                    </div> -->
                </div>
        </tbody>
    </table>

JQuery Select2 does not display properly inside bootbox dialog modal

4 Answers4