Select2 dropdown options fail to appear when Select2 is used inside a Colorbox.
I am using the Select2 dropdown successfully elsewhere in my application, but this is the first time I've tried to use it inside a colorbox popup.
I've tried all of the suggestions listed here, to no avail:https://github.com/jackmoore/colorbox/issues/474#issuecomment-25836400
I'm using jquery v3.1.1, jquery-ui v1.12.1, jquery.Select2 v4.0.3, and jquery.colorbox v1.4.29. My browser is IE 11.
I'm opening the colorbox like this (I'm not using an iframe, and modal is the default value of "false"):
$.colorbox(
{
href: '/MyDomain/MyAction',
open: true,
scrolling: true,
width: '60%',
height: "60%",
onComplete: function () {
myJavascriptFunction();
}
});
The function that runs onComplete looks like this:
myJavascriptFunction = function () {
$('#SelectId option[value="0"]').prop('disabled', true);
$("#SelectId ").select2({
minimumResultsForSearch: Infinity, //turns off the search box
width: '400px',
theme: "classic",
dropdownAutoWidth: true,
templateResult: myMethod,
templateSelection: myOtherMethod
}).on('select2:select', function (e) {
yetAnotherMethod(e);
});
}
I suspect this is a display issue. The Select2 method call seems to be working--it has the correct width, displays the selected option correctly, and when I click it both the templateResult and templateSuggestion methods fire correctly, and it visibly goes through the same slight flicker and change in color that Select2 elements do when I use them successfully elsewhere. When I click the Select2 element and view the page in DOM Explorer I can see that select2 html exists, along with the options. They just are not visible.
From the user's perspective the dropdown simply fails to drop and display the select options.