Question

110

Bootstrap dropdown doesn't work inside modal

rated 0 times [ 117] [ 7] / answers: 1 / hits: 15213 / 9 Years ago, wed, april 29, 2015, 12:00:00

Is there a known reason why dropdown would not work inside a modal? I am using rails 4 and the dropdown works perfectly fine all over the app except for the modal. Here is how it is rendered
enter

I suspect this might be an issue with javascript, I have tried changing the order of including javascripts in my application.js but nothing would work. Here is my application.js:

//= require bootstrap

//= require jquery/jquery-2.1.1.js

//= require jquery_ujs

//= require turbolinks

//= require cloudinary

//= require jquery.turbolinks

//= require slimscroll/jquery.slimscroll.min.js

//= require bootstrap-sprockets

Has anyone ran into this before? is there a fix for this? I tried searching all over but couldn't find any relevant solution

EDIT: The modal code

    <div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>

      `enter code here`<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 id=myModalLabel>Add Group</h4>

          </div>





    <div class=modal-body>

        <div class=form-group><label>Class name</label> <input type=name placeholder=Choose a name for your group class=form-control></div>



<div class=form-group><label>Class name</label> <input type=desc placeholder=Add a description for your group class=form-control></div>



    <div class=form-group>

                    <label class=font-noraml>Select</label>

                    <div class=input-group>

                    <select data-placeholder=Select a grade... class=chosen-select style=width:350px; tabindex=2>

                    <option value=>Select</option>

                    <option value=Prekindergarten>Prekindergarten</option>

                    <option value=Kindergarten>Kindergarten</option>

                    <option value=1st>1st</option>

                    <option value=2nd>2nd</option>

                    <option value=3rd>3rd</option>

                    <option value=4th>4th</option>

                    <option value=5th>5th</option>

                    <option value=6th>6th</option>

                    <option value=7th>7th</option>

                    <option value=8th>8th</option>

                    <option value=9th>9th</option>

                    <option value=10th>10th</option>

                    <option value=11th>11th</option>

                    <option value=12th>12th</option>

                    <option value=Higher Education>Higher Education</option>

                    </select>

                    </div>

                    </div>

       </div>



          <div class=modal-footer>

            <button type=button class=btn btn-default data-dismiss=modal>Close</button>

            <button type=button class=btn btn-primary>Save changes</button>

          </div>

        </div>

      </div>

    </div>

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jimmiejudahm

Add To Favorites

Follow

Total Points: 319

Total Questions: 98

Total Answers: 117

Location: Venezuela

Member since Sat, Apr 24, 2021

3 Years ago

answered 9 Years ago dequant · Accepted Answer

I assume you use the jQuery.Chosen plugin. Here's the code:

$(document).ready(function() {

  $('#myModal').on('show.bs.modal', function(e) {

    console.debug('modal shown!');

    $('.chosen-select', this).chosen({width: 350px});

  });



  $(#myModal).modal('show');

});

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js>

</script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js>

</script>

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css rel=stylesheet>

<script src=https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js>

</script>

<link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css>



<!-- Modal -->

<div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>

  <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 id=myModalLabel>

          Add Group

        </h4>

      </div>

      <div class=modal-body>

        <div class=form-group>

          <label>

            Class name

          </label>

          <input type=name placeholder=Choose a name for your group class=form-control>

        </div>



        <div class=form-group>

          <label>

            Description

          </label>

          <input type=desc placeholder=Add a description for your group class=form-control>

        </div>



        <div class=form-group>

          <label class=font-noraml>

            Select

          </label>

          <div class=input-group>

            <select data-placeholder=Select a grade... class=form-control chosen-select style=width:350px; tabindex=2>

              <option value=>

              </option>

              <option value=Prekindergarten>

                Prekindergarten

              </option>

              <option value=Kindergarten>

                Kindergarten

              </option>

              <option value=1st>

                1st

              </option>

              <option value=2nd>

                2nd

              </option>

              <option value=3rd>

                3rd

              </option>

              <option value=4th>

                4th

              </option>

              <option value=5th>

                5th

              </option>

              <option value=6th>

                6th

              </option>

              <option value=7th>

                7th

              </option>

              <option value=8th>

                8th

              </option>

              <option value=9th>

                9th

              </option>

              <option value=10th>

                10th

              </option>

              <option value=11th>

                11th

              </option>

              <option value=12th>

                12th

              </option>

              <option value=Higher Education>

                Higher Education

              </option>

            </select>

          </div>

        </div>

      </div>

      <div class=modal-footer>

        <button type=button class=btn btn-default data-dismiss=modal>

          Close

        </button>

        <button type=button class=btn btn-primary>

          Save changes

        </button>

      </div>

    </div>

  </div>

</div>

<div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true>

  <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 id=myModalLabel>

          Add Group

        </h4>

      </div>

      <div class=modal-body>

        <div class=form-group>

          <label>

            Class name

          </label>

          <input type=name placeholder=Choose a name for your group class=form-control>

        </div>



        <div class=form-group>

          <label>

            Description

          </label>

          <input type=desc placeholder=Add a description for your group class=form-control>

        </div>



        <div class=form-group>

          <label class=font-noraml>

            Select

          </label>

          <div class=input-group>

            <select data-placeholder=Select a grade... class=form-control chosen-select style=width:350px; tabindex=2>

              <option value=>

              </option>

              <option value=Prekindergarten>

                Prekindergarten

              </option>

              <option value=Kindergarten>

                Kindergarten

              </option>

              <option value=1st>

                1st

              </option>

              <option value=2nd>

                2nd

              </option>



            </select>

          </div>

        </div>

      </div>

      <div class=modal-footer>

        <button type=button class=btn btn-default data-dismiss=modal>

          Close

        </button>

        <button type=button class=btn btn-primary>

          Save changes

        </button>

      </div>

    </div>

  </div>

</div>

Reference: chosen with bootstrap 3 not working properly