Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

modal layer scroll bar disappear


hi there,

modal layer scroll bar disappear after using the dropzone upload file done, which cause can't scroll down to see the rest of options and buttons, may i know how to fix it?

how to recreate?
1: call the below to pop up the food's detail
$('#kt_modal_food_detail').modal('toggle');

2: there's a component to upload the food's image by using dropzone.
after uploaded the image successfully and the dropzone layer disappear, then the food's detail layer scroll bar disappear as well,

Thanks.


Text formatting options
Submit

Replies (3)


Hi,

May I know, which template, demo, and build method(gulp/webpack) are you using ?

Can you provide us a test link to your site via private reply so we can check it online?

Otherwise, can you send us your HTML/JS code via Github Gist to simulate this issue on our end?

Regards.



Hi there,
Thank you very much for the quick reply.

I am using v7.29.

demo4/dist/features/bootstrap/modal.html , I am using "Scrolling Long Content" to show the food detail and it will show the scroll bar, and then I will need to add one more button to allow the image upload by using DropzoneJS (demo4/dist/crud/file-upload/dropzonejs.html) , (Single File Upload), but I will need to popup in a new pop up layer to let user select and upload the image, however, after uploading the file done and this component hide, the food detail layer scroll bar disappear, as a result,user can't scroll up or down to modify the content.

in short:
1: pop up a layer displaying a long content (ref :Scrolling Long Content).
2: base on the above layer, popup the uploading layer dropzonejs component to upload the file.
3: after uploading done, the first popup layer scroll bar disappear.



Hi,

I suppose you are using stacked Bootstrap modals which are not supported by Bootstrap officially. Basically, if you open a new Modal over the current one the current one gets closed.

You can check the following workaround solutions to handle multiple modals:

https://www.codeply.com/go/xNxN5cMYBr/bootstrap-4-multiple-modal-overlay
https://codepen.io/maouida/pen/NPGaaN
https://bootstrapcreative.com/pattern/multiple-modals-on-a-page-bootstrap-4/

Regards


Text formatting options
Submit
Text formatting options
Submit