La liste déroulante Select2 échoue à l'intérieur de Colorbox

Question

Les options de liste déroulante Select2 ne s'affichent pas lorsque Select2 est utilisé dans une Colorbox. J'utilise la liste déroulante Select2 avec succès ailleurs dans mon application, mais c'est la première fois que j'ai essayé de l'utiliser dans un popup de colorbox.

J'ai essayé toutes les suggestions énumérées ici, en vain: https://github.com/jackmoore/colorbox/issues/474#issuecomment-25836400

J'utilise jquery v3.1.1, v1.12.1 jquery-ui, jquery.Select2 v4.0.3 et jquery. colorbox v1.4.29. Mon navigateur est IE 11.

J'ouvre la colorbox comme ça (je ne suis pas en utilisant une iframe et modale est la valeur par défaut de « false »):

$.colorbox(
     { 
      href: '/MyDomain/MyAction', 
      open: true, 
      scrolling: true, 
      width: '60%', 
      height: "60%", 
      onComplete: function() { 
       myJavascriptFunction(); 
      } 
     }); 

La fonction qui fonctionne onComplete ressemble à ceci:

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); 
    }); 
} 

Je suppose qu'il s'agit d'un problème d'affichage. L'appel de méthode Select2 semble fonctionner - il a la bonne largeur, affiche correctement l'option sélectionnée, et quand je clique dessus, les méthodes templateResult et templateSuggestion se déclenchent correctement, et il passe visiblement par le même léger scintillement et change de couleur Les éléments Select2 font quand je les utilise avec succès ailleurs. Lorsque je clique sur l'élément Select2 et que j'examine la page dans l'Explorateur DOM, je peux voir que select2 html existe, avec les options. Ils ne sont tout simplement pas visibles. Du point de vue de l'utilisateur, la liste déroulante ne peut tout simplement pas tomber et afficher les options de sélection.

Answer 1

En fait, j'ai fait pas appliquer les suggestions correctement de https://github.com/jackmoore/colorbox/issues/474#issuecomment-25836400.

L'une des suggestions, il est de changer le z-index, comme ceci:

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

Je pensais que je l'avais essayé, mais regardant de plus près mon css était remplacé par le fichier select2.css, qui a chargé après J'ai appliqué mon z-index et ainsi écrasé ce que j'essayais de faire.

J'ai même essayé d'appliquer le z-index via un appel jquery, par exemple:

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

avant et après l'appel à Select2, mais pour une raison quelconque cela n'a eu aucun effet.

Mais le chargement de mon changement de style après select2.css est chargé résolu le problème.