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.
Replies (6)
Ran into this too! Dropzone seems to mess with the modal’s scroll. Adding setTimeout(() => $('.modal-body').css('overflow', 'auto'), 100); after the upload helped. We had the same issue when showcasing food item details over at https://wafflemenu.us/waffle-house-delivery/
I encountered a similar issue with disappearing scrollbars after file uploads in modals. It seems like the modal might be losing its height or overflow properties after the dropzone layer disappears. A quick fix could be to manually trigger a reflow or reset the modal's CSS properties after the image upload is complete. You can try adding something like this after the file upload completes:
$("#kt_modal_food_detail").css("overflow-y", "auto");By the way, I recently got a wopet feeder for my dog, and it’s been a game-changer for managing his feeding schedule. The app control is so convenient for when I’m tied up with work, and he’s always on time for his meals!
Tech glitches like disappearing scroll bars can tank a food app's success just ask celeb investors who've lost millions on buggy platforms. For more on how stars avoid these costly pitfalls, visit https://girlymedia.com/.
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
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.
