Select2 dropdown fails inside Colorbox

Question

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.

Tom Regan Tom Regan · Accepted Answer · 2017-09-01T20:39:18

Actually I did not apply the suggestions correctly from https://github.com/jackmoore/colorbox/issues/474#issuecomment-25836400.

One of the suggestions there is to change the z-index, like so:

.select2-close-mask {
z-index: 10000;
}
.select2-dropdown {
z-index: 10001;
}

I thought I had tried that, but on closer inspection my css was being overridden by the select2.css file, which loaded after I applied my z-index and thus over-wrote what I was trying to do.

I even tried applying the z-index via a jquery call, eg:

$('.select2-dropdown').css('z-index',10005);

both before and after the call to Select2, but for whatever reason this had no effect.

But loading my style change after select2.css is loaded fixed the problem.

Select2 dropdown fails inside Colorbox

2 Answers