1

I'm dealing with select2 within a modal. I'm working on it many weeks ago. I've read some posts but none of the solutions works for me. For instance:

Select2 doesn't work when embedded in a bootstrap modal

Select2 not working inside bootstrap modal

The code is:

<div id="modal_sg" class="modal fade" style="overflow: hidden;">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Please select a corporation</h4>
        </div>
        <div class="modal-body">
            <form id="form_ag" class="form form-horizontal">
                <input type="hidden" style="display:none;" value="32" name="id">
                <div class="form-group">
                    <label for="id_sg" class="control-label col-md-3">Corporation</label>
                    <div class="col-md-9">
                        <select class="form-control select2" id="id_sg" name="id_sg">
                            <option value="89">a</option>
                            <option value="115">b</option>
                            <option value="84">c</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary" id="bt_modal_sg">Save</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

JavaScript

$('.select2').select2({
    dropdownParent: $('#modal_sg')
});

CSS

.select2-container {
    width: 100% !important;
    padding: 0;
}

I'm using select2-4.0.3. I don't know how to fix the issue nor what is wrong in my code. Any help will be really appreciated.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
plectranthus
  • 69
  • 1
  • 3
  • 11
  • What exactly is your issue? "Not working" is pretty unclear. – Shrike Aug 02 '16 at 09:01
  • 1
    select2 works fine except within a modal. When I click on the dropdown, it changes the expand/collapse symbol, but I can't see any dropdown list. I've tested all solutions I've found, but none of them works for me. I'm sure there is something wrong in my code but I can't find it! – plectranthus Aug 02 '16 at 16:12

6 Answers6

4

This Works for me!

$('select').select2({
    width: '100%'
});
Ngaiza
  • 221
  • 2
  • 4
2

It's not pretty, but worked for me:

.select-in-modal+.select2-container {
    width: 100% !important;
    padding: 0;
    z-index:10000;
}

.select2-container--open {
    z-index:10000;
}
Tom
  • 1,387
  • 3
  • 19
  • 30
Mikhail Chernykh
  • 21
  • 2
0

using dropdownParent is the way to go. I successfuly use select2 in Bootstrap dialogs. But from your code it's clear what css properties you dialog system has. Is it Bootstrap or something else?

Anyway you need to specify an element with position:fixed in dropdownParent option . It should work, at least in v4 (what version of select2 do you use?)

Shrike
  • 9,218
  • 7
  • 68
  • 105
0

Although, it's too late for this answer; the following CSS should do the trick:

span.select2-container.select2-container--default.select2-container--open {
    z-index: 100003;
}

span.select2-selection.select2-selection--single {
    outline: none;
}

It works for me and tested in all latest versions of Chrome, Firfox and Micorsoft Edge as of 24th Sept, 2020.

Ali Azam
  • 56
  • 1
  • 3
0

<!DOCTYPE html>
<html lang="en">
<head>
  <title>select2 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
</head>
<body>
<div class="container">
  <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" data-backdrop="static">
  <div id="modalSize" class="modal-dialog">
      <div class="modal-header" style="background-color: white;color: #FFFFFF;">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
          <h3 id="modalTitle"></h3>
      </div>
      <div class="modal-content">
        <div class="modal-header">
      <div class="modal-body">
          <div id="showDialogInfoDiv">
            <select id="select2insidemodal" class="select2 form-control" style="width: 100%;">
              <option value="AL">Alabama</option>
              <option value="WY">Wyoming</option>
              <option value="AL">bangla</option>
              <option value="WY">indo</option>
            </select>
          </div>
      </div>
      <div class="modal-footer">
          <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </div>
  </div>
</div>
</div>
</div>
</body>
</html>

<script>
    $('.select2').select2();
 
</script>
Mohammad Ali Abdullah
  • 321
  • 2
  • 10
  • 1
    While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Pradeepal Sudeshana Feb 10 '21 at 09:29
-1

Add the following code to the javascript file:

$.fn.modal.Constructor.prototype.enforceFocus=function(){};
rdurand
  • 7,342
  • 3
  • 39
  • 72
Haben
  • 1
  • 1