I'm currently using Bootstrap 4.6 within my Angular application. I have implemented a modal that expands to full-screen on mobile devices, and now I want to add a fixed footer with scrolling body content.
I've attempted to adjust the height of the modal-content to 100% and set margins in the footer based on the height of the container, but unfortunately, I haven't been able to achieve the desired effect of having the content scroll behind the footer...
Here is an image depicting the current layout:
https://i.sstatic.net/1qR8z.png
The section displaying "Quantità" and other related components represents the footer. Here's the code snippet for my modal:
.modal-body {
padding: 0;
}
.modal-footer {
padding: 0;
margin-bottom: 1.5rem;
}
@media (max-width: 767.98px) {
.modal-footer {
position: absolute;
bottom: 0;
}
}
@mixin modal-fullscreen() {
padding: 0 !important; // override inline padding-right added from js
.modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-body {
overflow-y: auto;
}
}
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$infix} {
@include modal-fullscreen();
}
.btn#{$infix}-block {
display: block;
width: 100%;
}
}
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f001f00">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161140f100f10">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<ngb-modal-window role="dialog" tabindex="-1" aria-modal="true" class="d-block fade modal modal-fullscreen-sm show">
<div role="document" class="modal-dialog">
<div class="modal-content">
<app-modal-product-content _nghost-cio-c135="">
<div _ngcontent-cio-c135="" class="modal-header">
<div _ngcontent-cio-c135="">
<h4 _ngcontent-cio-c135="" class="modal-title text-truncate">CAFFE</h4>
</div><button _ngcontent-cio-c135="" type="button" aria-label="Close" class="close"><span _ngcontent-cio-c135="" aria-hidden="true">×</span></button></div>
<div _ngcontent-cio-c135="" class="modal-body">
<ngb-accordion _ngcontent-cio-c135="" role="tablist" class="accordion" ng-reflect-close-other-panels="true" ng-reflect-destroy-on-hide="false" ng-reflect-active-ids="panel-aggiunte" aria-multiselectable="false">
<!--container-->
<div class="card ng-star-inserted">
<div role="tab" class="card-header" id="panel-aggiunte-header"><button _ngcontent-cio-c135="" type="button" ngbpaneltoggle="" class="accordion-toggle ng-star-inserted" ng-reflect-ngb-panel-toggle="" aria-expanded="true" aria-controls="panel-aggiunte"><div _ngcontent-cio-c135="" ngbpaneltoggle="" class="aggiunte-title"><strong _ngcontent-cio-c135="" class="d-block mb-2">AGGIUNTE</strong><label _ngcontent-cio-c135="" class="d-block mb-0">Aggiungi ingredienti alla tua pietanza</label></div></button>
<!--bindings={
"ng-reflect-ng-template-outlet-context": "[object Object]"
}-->
</div>
...