Menu
I have a bootstrap model with an horizontal form, and it currently has height: 80vh;. I want the modal to be this large and I am happy with it.
The problem is that the modal-footer is not behaving correctly. Instead of sticking to the bottom, it occupies a large portion of the space that should belong to the input fields:
I want to force the modal-footer to stay at the bottom, but even after reading other discussions and trying with padding: 0; I can't fix it. Following is a portion of the code I am using. I removed some of the input fields to make it easier to read.
How can I fix the stuborn 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>
442
Code example. To add sticky functionality we'll use two separate BEM modifiers: modal-header--sticky (header fixed top) modal-footer--sticky (footer fixed bottom)
Bootstrap 4.3 added new built-in scroll feature to modals. This makes only the modal-body content scroll if the size of the content would otherwise make the page scroll. To use it, just add the class modal-dialog-scrollable to the same div that has the modal-dialog class.
Use the . modal-dialog-scrollable class to enable scrolling inside the modal.
Where in the DOM? I typically plop a modal's HTML before the closing </body> tag. That's primarily for styling reasons. It's easier to position the modal when you're dealing with the page-covering body rather than an unknown set of parent elements, each potentially with their own positioning context.
You should add .row class in the .modal-body and put the form tag inside .col-lg-12 class.
check this out i hope this will work!!!
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
