1
votes

Select2 ne s'affiche pas correctement dans le mode bootstrap

J'essaie d'utiliser select2 pour afficher une liste déroulante dans un modal. La liste déroulante ne s'affiche pas comme prévu, voici comment elle s'affiche ci-dessous.

Si je place ma sélection en dehors du modal, cela fonctionne bien, comme ceci

Voici mon code HTML:

<div class='modal fade' id='comm".$row[' issue_id ']."'>
  <div class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <h5 class='modal-title'>Add Comments</h5>
        <button type='button' class='close' data-dismiss='modal'><span>×</span></button>
      </div>
      <div class='modal-body'>
        <p>Add Comments to this Incident</p>
        <form method='post' action='processing.php'>
          <textarea type='text' cols='40' name='comments' required></textarea>
          <input type='hidden' name='issue_id' value='".$row[' issue_id ']."'><br>
          <input type='hidden' name='url' value='".$url."'><br>
          <select class='js-example-basic-multiple' name='tag[]' multiple='multiple'>
            <option value='AL'>Alabama</option>
            <option value='WY'>Wyoming</option>
          </select>
          <br><button type='submit' class='btn btn-primary' name='submit_comm'>Submit</button>
        </form><br>
      </div>
      <div class='modal-footer'>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
</script>

php jquery html jquery-select2

0 commentaires

3 Réponses :

0
votes

Je pense que vous devez attacher le menu déroulant au modal. Essayez quelque chose comme ceci:

 <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    ...
    <select id="mySelect2">
        ...
    </select>
    ...
</div>

...

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

J'ai obtenu ceci d'ici: https://select2.org/troubleshooting/common-problems

Veuillez lire l'article ci-dessus pour plus d'informations sur ce problème!

0 commentaires

1
votes

<div id="myModal" class="modal fade" role="dialog" aria-hidden="true">
remove tabindex="-1" from modal and then just init select2 like $('.js-example-basic-multiple').select2(); as you did

0 commentaires

0
votes

Lors de l'utilisation de select2 avec bootstrap, ce code situé dans assets / stylesheets / application.scss a tout corrigé pour moi

@import "bootstrap-sprockets"; 
@import "bootstrap";
@import "select2";
@import "select2-bootstrap";

0 commentaires