All geek questions in one place

Bootstrap modal-footer does not stick to the bottom of the modal

I have a bootstrap model with a horizontal shape, and currently it has height: 80vh; . I want the modality to be so great and I am pleased with it.

The problem is that modal-footer is not working properly. Instead of sticking to the bottom, it takes up most of the space that should belong to the input fields:

enter image description here

I want to make modal-footer stay below, but even after reading other discussions and attempts using padding: 0; I can’t fix it. Below is the part of the code that I am using. I deleted some of the input fields to make it easier to read.

How can I fix the footer?

 $(document).ready(function() { $("a").click(function() { $('.modal').modal({ show: true }); return false; //prevent browser defualt behavior }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <link data-require=" bootstrap-css@ *" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> <script src="script.js"></script> </head> <body> <a href="#" class="btn btn-info btn-lg">Click me !</a> <div class="modal fade in" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Edit Package MyPackage</h4> </div> <div class="modal-body"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label">Package Name:</label> <div class="controls"> <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> </div> </div> <!-- Other fields here --> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="savePackageChangesBtn">Save changes</button> </div> </div> </div> </div> </body> </html>
+5
source share
1 answer

You must add the .row class to .modal-body and place the form tag inside the .col-lg-12 class.

check it out, i hope it works !!!

 <div class="modal fade" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true"> <div class="modal-dialog" style="overflow-y: auto; max-height: 90vh; height: 80vh;"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Edit Package MyPackageName</h4> </div> <div class="modal-body row"> <div class="col-lg-12" <form class="form-horizontal"> <div class="control-group"> <label class="control-label">Package Name: </label> <div class="controls"> <input type="text" class="form-control" id="package-name" placeholder="MyPackageName"> </div> </div> <!-- Other fields here --> </form> </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" id="savePackageChangesBtn" data-url="@Url.Action("EditPackage", "Package")">Save changes</button> </div> </div> </div> </div>
+6
source

Source: https://habr.com/ru/post/1208344/

More articles:


All Articles