Scroll in modal
Hello,
I was trying to scroll inside a fullscreen modal, but it didn't work as expected.
In the modal I have a set of inputs and then I want to create a 'card', and I would like a scroll on that card.
Could you help me with this little problem, I don't know how else to try. 
Component I'm trying to use: https://preview.keenthemes.com/html/metronic/docs/general/scroll
Sample source code
<div class="modal fade" tabindex="-1" id="modalTeste">
<div class="modal-dialog modal-fullscreen p-9">
<div class="modal-content">
<div class="modal-header" id="headerteste">
<h3 class="modal-title">Modal title
<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-1"><span class="path1"></span><span class="path2"></span></i>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<input type="text" class="form-control" placeholder="name@example.com"/>
</div>
</div>
<div class="border scroll"
data-kt-scroll="true"
data-kt-scroll-height="auto"
data-kt-scroll-dependencies="#headerteste, #footteste"
data-kt-scroll-wrappers="#kt_example_js_content"
data-kt-scroll-activate="{default: true, lg: true}"
data-kt-scroll-offset="100px"
data-kt-scroll-save-state="false"
>
<div id="kt_example_js_content">
...
</div>
</div>
</div>
<div class="modal-footer" id="footteste">
<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>Replies (4)
Hey,
Sean, I think I didn't make my question clear, sorry about that.
Here's the code I'm trying to generate:
https://gist.github.com/lggiorgi/83a487a600d26f37a67d460dfebb6d99
Just for context about the code, I'm using Laravel + AlpineJS.
Well, in the 'Pedidos de venda' tab there are two cards, that's where I want to add the scroll, so that they are at the maximum size of the modal.
In my tests here, I even made a JS function to check if it would have this possibility, so in the 'Pedidos disponiveis' card it renders using this function. In the 'Pedidos na pre-carga' card, it is using the scroll function of the template.
This is the code in the browser: https://gist.github.com/lggiorgi/0ed2a5679e08bc10864350efa390bcb5
Hi,
Sorry for the late reply.
We tried to check your provided code but we could not detect the issue since it uses server-side code and we are not sure how the final HTML code where we can check the issue.
Can you please share your test link for this page so we can check it online and debug the html/js that's related to Metronic.
Also please confirm your Metronic version and build method(gulp or webpack).
Regards.
Sorry, for some reason I am unable to upload the example source code
