Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

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. happy

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>


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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



Hi,

Have you tried Modal Examples ?
To share your code please use https://gist.github.com/

Regards.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(