Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Bootstrap Modal not scrolling
I'm using your Laravel version of Metronic, and my modals won't scroll if they are longer than the viewable window. They just get cut off, and there's no way to access the hidden portion of the modal. Is there some sort of CSS class that I need to add? Scrollable seems to be a default feature of Bootstrap 5 modals, but I can't get it to work.
<img>https://i.ibb.co/6N7Z3cs/Screen-Shot-2022-04-16-at-5-10-59-PM.png</img>
<div class="modal fade" tabindex="-1" id="update_menu_item_modal" data-bs-backdrop="static" data-bs-keyboard="false">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit Menu Item</h5>
<!--begin::Close-->
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<!--end::Close-->
</div><pre>
Replies (1)
Hi,
As per our testing, on Metronic the scrollable modal content examples work as expected:
https://getbootstrap.com/docs/5.1/components/modal/.
Scrollable page with long modal content:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_scrollable_1">
Launch demo modal
</button>
<div class="modal fade" tabindex="-1" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal">
<span class="svg-icon svg-icon-2x"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body" >
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Scrolable modal body without page scrolling:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_scrollable_2">
Launch demo modal
</button>
<div class="modal fade" tabindex="-1" >
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<!--begin::Close-->
<div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
<span class="svg-icon svg-icon-2x"></span>
</div>
<!--end::Close-->
</div>
<div class="modal-body">
<p>Long modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>Regards.
