2

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 image description here

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

Rami Hussein
  • 57
  • 1
  • 2
  • 9

2 Answers2

3

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

Community
  • 1
  • 1
dekkard
  • 6,121
  • 1
  • 16
  • 26
1

your code works in my modal I assume there is something wrong with styles, not with JS check styles

Aleksandr Larionov
  • 126
  • 5
  • Still, it may be an issue with javascripts because you will have a different JS configuration that I do. I checked the styles but don't seem to find the issue – Rami Hussein Apr 29 '15 at 23:34