jQuery select2 appearence issue in modal

Question

I am using jQuery select2 inside a modal... but its appearance is not right... u can see it in the below image... How to fix this ? Problem happens only inside modal.image

<div class="col">
   <label class="control-label">Department*</label>
      <select class="form-control select2" name="department_id">
         <option value="" selected>Select Department</option>
             @foreach ($departments as $value)
                <option value="{{ $value->id }}">{{ $value->name }}</option>
             @endforeach
     </select>
</div>

Jquery used for modal,

function viewCreate() {
        if (typeof device !== 'undefined')
            device.abort();
        device = $.ajax({
            type: 'GET',
            url: "devices/create/",
            dataType: 'JSON',
            async: true,
            beforeSend: function () {
                if (typeof device !== 'undefined')
                    device.abort();
            },
            success: function (response) {                   
                $('#showData').html(response.data);
                $('.showModal').modal('show');
            }
        });
    }

You need to instantiate the select2 library on the select when the modal becomes visible, not when it's unavailable on DOM load. — Rory McCrossan, Jan 19 '21 at 09:18
Can you please add the JS code which is used to display your modals to the question. I can then give you an example. — Rory McCrossan, Jan 19 '21 at 09:22

Rory McCrossan · Accepted Answer · 2021-01-19T10:11:34.907

The issue is because the Select2 library is being instantiated on the content of the modal before it's visible in the DOM. As such, it causes rendering issues as the space used by the elements cannot be calculated accurately.

To fix this you can hook to the shown.bs.modal event and initialise the Select2 elements after the modal is visible:

// outside the AJAX call:
$('.showModal').on('shown.bs.modal', e => {
  $(e.target).find('.select2').select2({ /* your config options here... */ });
});

score 0 · Answer 2 · answered Jan 19 '21 at 09:36

0

You need to call your select2 in js file like this:

$(document).ready(function() {
    $('#department_id').select2();
});

I am not sure this is your problem but I hope it works for you.

answered Jan 19 '21 at 09:36

Mahdi

206
2
14

The OP says this only happens within the modal, all other Select2 instances are working. – Rory McCrossan Jan 19 '21 at 09:37

jQuery select2 appearence issue in modal

2 Answers2