How to make bootstrap dropdown be shown over a modal-footer instead of making modal overflow?
You can just add another class to your modal-body
<div class="modal-body girlLookAtThatBody">
and of course
.girlLookAtThatBody{
overflow-y:inherit !important;
}
So check it:
http://jsfiddle.net/uUvyy/
Hope that helps!
Bootstrap Dropdown hiding in modal
You have the same problem as in: Bootstrap dropdown clipped by overflow:hidden container, how to change the container?. The accepted answer will make the dropdown show outside the container, so the overflow will not matter any more.
Further hurdle may be that now the dropdown won't be shown at all since it is behind the modal dialog.
In that case, change your html to set the z-index explicitly (or handle it in the event script):
<ul aria-labelledby="dropDownControl" class="dropdown-menu" style="z-index:1000;">
If you are using AngularJS, you can use uib-bootstrap and the uib-dropdown control to append to body automatically (with "dropdown-append-to-body" attribute), but you still have to handle the z-index explicitly.
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 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;
}
Hide dropdown when modal is showing
You need to catch an event either show.bs.modal or shown.bs.modal on .modal. Something like this:
$(document).ready(function() {
$('.modal').on('shown.bs.modal', function (e) {
$('.navbar-toggleable-md').hide();
});
});
Read bootstrap docs: modals-events
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>Dropdown doesn't work after modal of Bootstrap imported
I had a similar problem. Importing straight from 'bootstrap' causes the dropdown listeners to disappear.
Fixed it by using deeper import:
import Modal from 'bootstrap/js/dist/modal';
Goes to category: I dont know why but it works.
Bootstrap-4 modal not showing when triggered from inside a dropdown
Difficult to pin-point the exact place where you had an issue without seeing any code... but from your description, it seems that you have placed the Modal id=myModal inside the dropdown... when it should be outside the dropdown;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container"> <h2>Dropdowns</h2> <p>The .dropdown class is used to indicate a dropdown menu.</p> <p>Use the .dropdown-menu class to actually build the dropdown menu.</p> <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#" data-toggle="modal" data-target="#myModal">Open Modal</a> </div> </div></div>
<!-- The Modal --><div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content">
<!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div>
<!-- Modal body --> <div class="modal-body"> Modal body.. </div>
<!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div>
</div> </div></div>Related Topics
Why Does Changing a CSS Class Name Break The Styles
How to Give Differnet Background Color to Slider
Why Use Ems for Padding & Margins with Browsers Now Scaling Correctly
How to Change CSS in Rmarkdown Cell & Shiny
How Do Display a Cms Collection in an ASP.NET Page Using an Xslt File
Difference Between CSS Fit-Content and Max-Content
Building a 4 Corners-Colors CSS3 Gradient
A Way to Correct Background Scaling in Ipad's Safari
How to Create Text Border in React Native
Succinct Way of Specifying Two or More Values for an Attribute in CSS Selector
CSS- Webkit-Text-Stroke But Stroke Covers Font-Color
(CSS) How Position Text (With Background Color) Over <Img> Tag Without Absolute Positioning
CSS - Successive Indenting of Siblings After Headings
What Are Common Classes, Helper Classes, and Utility Classes in CSS