File: public/asset/vendor/select2/docs/pages/02.troubleshooting/02.common-problems/docs.md

Recommend this page to a friend!

public/asset/vendor/select2/docs/pages/02.troubleshooting/02.common-problems/docs.md

File:	`public/asset/vendor/select2/docs/pages/02.troubleshooting/02.common-problems/docs.md`
Role:	Auxiliary data
Content type:	`text/markdown`
Description:	Auxiliary data
Class:	mnTemplate Route HTTP requests to callback functions
Author:	By fathurrahman
Last change:
Date:	1 year ago
Size:	`1,774 bytes`

Download

title: Common problems metadata:

description: Commonly encountered issues when using Select2.

taxonomy:

category: docs

Select2 does not function properly when I use it inside a Bootstrap modal.

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 <body> 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>
    ...
</div>

...

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

This will cause the dropdown to be attached to the modal, rather than the <body> element.

Alternatively, you may simply globally override Bootstrap's behavior:

// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};

See this answer for more information.

The dropdown becomes misaligned/displaced when using pinch-zoom.

See #5048. The problem is that some browsers' implementations of pinch-zoom affect the body element, which Select2 attaches to by default, causing it to render incorrectly.

The solution is to use dropdownParent to attach the dropdown to a more specific element.