I added a bootstrap modal to use as terms and conditions on a website but it does not scroll. I assume it is something in my code.
I have tried setting overflow to scroll and auto, but it does not work
<div id="tallModal" class="modal modal-wide fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Terms and conditions</h4>
</div>
<div class="modal-body">
<%= render 'terms', client: #client %>
</div>
<div class="modal-footer">
<button type="button" class="" data-dismiss="modal">Agree and close</button>
<button type="button" class="" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
CSS
.modal.modal-wide .modal-dialog {
width: 60%;
}
.modal-wide .modal-body {
overflow-y: scroll;
}
.modal-body {
max-height: 70vh
}
I am testing the app on Heroku if you want to inspect the code further.
https://safe-shore-24087.herokuapp.com/
Bootstrap's modal conflicts with your parallax.js, just disable it (try to use another library or rise a bug) and it should work as intended.
Related
I needed to increase the Bootstrap modal width so I used the code from this post: How to resize Twitter Bootstrap modal dynamically based on the content
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}
But now my modal is not vertically centered.
Edit: I already have modal-dialog-centered but it broke it
I tried to wrap the modal-content with a div with d-flex align-items-center but that didn't work either:
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="d-flex align-items-center">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
But that didn't work either
I am using vue.js with Bootstrap.
There is modal dive which shows like below I am finding a class that increase the width of modal div,
My modal div looks like this. I am planning to add 12 more tabs and for that I will need more width.
I am using modal-lg class to set the width.
I am using below code for modal div
<div class="modal fade" id="modal_create_product" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Create Product
</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<!-- Form Errors -->
<div class="alert alert-danger" v-if="createForm.errors.length > 0">
<p class="mb-0"><strong>Whoops!</strong> Something went wrong!</p>
<br>
<ul>
<li v-for="error in createForm.errors">
{{ error }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I just do
.modal-lg {
max-width: 70%;
}
Why don't you use the min-width CSS for your modal-content?
Like this:
.modal-dialog.modal-lg {
min-width: 80%
}
I am trying to position the modal in the center of the screen always.
To do so , I added the following CSS class to the modal :
.modal-position {
position: fixed;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%);
}
But its not getting exactly centered and on small screen size a vertical scroll bar appears beside it though there is enough space for the modal.
JS fiddle for the same : https://jsfiddle.net/86n9pbat/
Have you tried adding overflow: hidden in your css body/modal when modal is open?
Try this code
HTML
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog myModal">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
CSS
.myModal
{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
display:table;
max-width:50%;
}
.myModal .modal-content
{
display:table-cell;
}
pretty much the same code. I have added a myModal class to modal-dialog and the CSS..
link for reference
hope this helps..
No need for the above code.
Bootstrap modal is responsive by default.
If you want to adjust the width just change it on modal-content class in your css file.
I was answering another question today where the modal window had clickable buttons in FF and non-clickable buttons in Chrome.
Though I have figured out the issue that chrome was setting z-index of modal's parent to 0 and FF was setting it to auto.
In the demo below a modal window is placed inside of .fixed div. To fix the issue I had set z-index of .fixed div more than .modal-backdrop (let's say 1041).
Then I thought why can't I set the z-index of .fixed div myself as auto as FF sets it to auto, but it still didn't work in Chrome.
Can anyone explain what's happening here.
$(function(){
$('.modal-body > span').html($('.fixed').css('z-index'));
});
.fixed{
position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="fixed">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Modal testing</h4>
</div>
<div class="modal-body">
z-index: <span></span>
</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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
z-index sets the order of elements within a stacking context. position:fixed on the parent element of the modal contents places it in a different stacking context than the .modal-backdrop, used to hide the rest of the page.
The common solution for this is to place all the instances of modal contents from the page as direct children of the body element, after page loads, using this line:
$('.modal[role="dialog"]').appendTo('body');
$(function(){
$('.modal-body > span').html($('.fixed').css('z-index'));
});
$('.modal[role="dialog"]').appendTo('body');
.fixed{
position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="fixed">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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">Modal testing</h4>
</div>
<div class="modal-body">
z-index: <span></span>
</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>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
After I had install the flatly template from bootswatch (https://bootswatch.com/flatly/) the normal modal window of twbs is not working anylonger.
<a data-toggle="modal" href="#" data-target="#myModal">CLICK!</a>
.
.
<!-- 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">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</body>
</html>
It is work perfectly until I add the theme into my application.
This means that the modal window appear, but it is not active.
the modal window appears behind the grey background. the modal window has not the focus. I can't close it too.
But why?
Bootstrap set the z-index for the following items in their variables file:
#zindex-navbar: 1000;
#zindex-dropdown: 1000;
#zindex-popover: 1060;
#zindex-tooltip: 1070;
#zindex-navbar-fixed: 1030;
#zindex-modal-background: 1040;
#zindex-modal: 1050;
The z-index for items in bootswatch varables file is set as follows:
#zindex-navbar: 1000;
#zindex-dropdown: 1000;
#zindex-popover: 1060;
#zindex-tooltip: 1070;
#zindex-navbar-fixed: 1030;
#zindex-modal: 1040;
As you can see, the bootswatch modal is set on the same index as bootstrap's modal background. This conflict is causing issues. Setting the z-index for bootswatch's modal to 1050 will fix your issue, or adding an override to the .modal z-index in your site's stylesheet will help as well.
.modal {z-index: 1050;}
I had encountered the same problem.
But then I noticed that I was using Bootstrap v3.3.2 and the version in Flatly css file was v3.3.4
So I updated the bootstrap.js file to the latest version (which is currently 3.3.4) and it worked.
Hope this helps.
Thanks to Steve! The exact override, that helped me (had same issue with Flatly):
.modal-dialog {
z-index: 1050;}
Try like that :
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</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>