web-dev-qa-db-fra.com

choisi avec bootstrap 3 ne fonctionne pas correctement

J'ai ce code qui déclenche un bootstrap modal et charge son contenu via $.load(). La page que je charge a un élément select que j'appelle choisi. Voici le code:

$('.someClick').click(function(e){
   e.preventDefault();
   x.modal('show');
   x.find('.modal-body').load('path/page.html',
function(response, status, xhr){

       if(status =="success")
        $("select[name=elementName]").chosen();

    });
});

les résultats que j'obtiens sont comme l'image suivante:

Modal View

et voici mon contenu Html:

 <select name="elementName" data-placeholder="Please work.." class="chosen-select">
        <option value="test">Hi</option>
        <option value="test2">bye</option>
 </select>
jquerytwitter-bootstrapjquery-chosen
31
mamdouh alramadan

L'application de Chosen après l'affichage du modal devrait résoudre votre problème: 

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen();
});

Ou lorsque Chosen a déjà été appliqué, détruisez et réappliquez: 

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen('destroy').chosen();
});

Violon ici: http://jsfiddle.net/koenpunt/W6dZV/

Donc, dans votre cas, ce serait probablement quelque chose comme: 

$('.someClick').click(function(e){
   e.preventDefault();
   x.modal('show');
   x.on('shown.bs.modal', function(){
       x.find('.modal-body').load('path/page.html', function(response, status, xhr){
           if(status == "success"){
               $("select[name=elementName]").chosen();
           }
       });
   });
});

[~ # ~] modifier [~ # ~]

Pour compléter Chosen, vous pouvez utiliser le Chosen Bootstrap theme

45
Koen.

Essayez ceci, j'ai creusé dans choisi et j'ai découvert qu'il suffit de passer des options avec la propriété "width" comme dans ceci, ou toute autre valeur de largeur:

$("select").chosen({width: "inherit"})
20
lexeek

Comme décrit dans Autoriser Chosen à être utilisé dans Bootstrap modal , le problème est dans le chosen.jquery.js fichier. Je l'ai trouvé en ligne 435 et j'ai juste ajouté le code suivant à l'intérieur de l'instruction else. vérifiez-le, cela a fonctionné pour moi.

// Fixing problem when the select is not displayed.
   if ( this.form_field.offsetWidth == 0 ) {
      return "" + $(this.form_field).width() + "px";
    }
10
cg.mike

J'ai eu le même problème aujourd'hui mais j'avais besoin d'une solution rapide ... mais tire une capture d'écran de mon problème:

C'est mon problème

alors j'ai fait ça:

1) Le problème est la "largeur", donc j'ai vu sur console ce

jetez un oeil sur la console, sur le "select"

2) J'ai fait rapidement une solution en ajoutant une nouvelle "largeur". Comme vous pouvez le voir dans l'image précédente, il y a une classe 'class = "choisi-conteneur choisi-conteneur-simple', j'ai donc pris la classe" choisi-conteneur "pour ajouter la nouvelle" largeur "lorsque j'appelle mon" Modal " ". Voici mon code:

il suffit d'ajouter une ligne

donc, fondamentalement, j'ai ajouté ce code:

$('.chosen-container').css({ 'width':'350px' });

à la fonction qui appelle le modal. N'hésitez pas à copier et coller ceci sur votre fonction :) Peut-être que ce n'est pas une solution parfaite mais cela fonctionne pour moi et peut-être pour vous aussi.

désolé pour mon anglais, mais j'apprends. Je parle mieux l'espagnol que l'anglais. Salutations

PD: Voilà mon résultat

3
MRH

L'ajout de largeur à la classe choisie résoudra ce problème.

$('.someClick').click(function(e){
   e.preventDefault();
   x.modal('show');
   x.on('shown.bs.modal', function(){
       x.find('.modal-body').load('path/page.html', function(response, status, xhr){
           if(status == "success"){
               $("select[name=elementName]").chosen({ width:'100%' }); /* add width here !!! */
           }
       });
   });
});
3
Gunasegar

La solution suivante a fonctionné pour moi (de http://codepen.io/m-e-conroy/pen/ALsdF ):

Redéfinir la classe "modale":

.modal { 
    display: block;
}
1
KirEvse