Chosen Dropdown Within Bootstrap Modal Is Hidden Behind Modal Footer

Chosen dropdown within Bootstrap modal is hidden behind modal footer

For z-index to work, you also have to set position = relative, absolute, or fixed. Also putting z-index something like 5000 might help. (the modal is at a z index in the 2000's.

so in your css i would add this:

.class-of-dropdown {
    position: relative;
    z-index: 5000;
}

Edit:
.modal-body class has a overflow-y: auto property. You might need to change this to:

.modal-body {
    overflow-y:visible;
}

Chosen dropdown list Z index issue with Bootstrap Modal

There is a CSS that is causing this problem. After the modal opens, there is a div called "Another Heading" which has a class called card. This card class has a default scss which is causing the problem;

.accordion > .card{
   overflow: hidden;
}

The solution is just to write the CSS given below to override this CSS;

.accordion > .card{
   overflow: inherit;
}

Dropdown Hidden Inside Bootstrap Modal

This issue has been resolved after upgrading bootstrap from 3.x to 4.x, now bootstrap 4 is taking care of all these edge cases out of the box.

Chosen plugin displaying in bootstrap modal not working well

This is a CSS conflict, may be after adding class span7 to your select.

Try to apply width as an inline style to the select.

<select name="tenant" data-placeholder="Select Tenant" class="chzn_a span7" style="width: 200px;">

When I used Chosen plugin, I used class as chzn-select but you've used chzn_a.

For example: check this JSFiddle.

Bootstrap dropdown doesn't work inside modal

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">            ×          </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">            ×          </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>

---

Related Topics