CODEWITHSUNDEEP
phpjqueryhtmljquery-select2
Freek
Freek

Reputation: 65

Select2 not displaying properly in bootstrap modal

I'm trying to use select2 to display a dropdown in a modal. The dropdown isn't showing as expected, this is how it's showing below.

What it shows

If i place my Select outside of the modal, it works fine, like this

This is what should show on the modal

Here's my HTML code:

<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>&times;</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>

Upvotes: 1

Views: 1337

Answers (3)

Cristian Rennella
Cristian Rennella

Reputation: 727

When using select2 with bootstrap this code located in assets/stylesheets/application.scss fixed everything for me

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

Upvotes: 0

Zihad Hridoy
Zihad Hridoy

Reputation: 26

<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

Upvotes: 1

Guilherme Assemany
Guilherme Assemany

Reputation: 686

I think you need to attach the dropdown to the modal. Try something like this:

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

...

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

I got this from here: https://select2.org/troubleshooting/common-problems

Please read the article above for more information about this problem !

Upvotes: 0

Related Questions