How to initiate sticky dynamically in VueJS?
Hi,
I've got a Metronic 9 modal and inside it there is a header I'd like to make sticky within the modal, when I scroll inside it, but it's not working.
This is the code I'm using inside the modal:
onUpdated(() => {
if(modalHeader.value && !KTSticky.getInstance(modalHeader.value)){
const headerOptions = {
name: 'modal-header',
class: 'sticky shadow-lg z-5 rounded-t-xl',
top: 100,
left: 'auto',
right: 'auto',
offset: 0
}
new KTSticky(modalHeader.value, headerOptions)
}
})
Any idea why this is not working?
Replies (1)
Hi,
Thank you for reaching out to us.
You can achieve this without KTSticky component, make your modal full width with modal-fullscreen class and then make content scrollable with modal-dialog-scrollable.
<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">
<i class="ki-duotone ki-cross fs-2x"><span class="path1"></span><span class="path2"></span></i>
</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>You can find more modal usage examples in our documentation:
https://preview.keenthemes.com/html/metronic/docs/base/modal#overview
Regards,
Lauris Stepanovs,
Keenthemes Support Team
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
