After trying numerous solutions without success, I am posting this question regarding an issue with the scrolling behavior of Bootstrap modals. Here is the scenario:
I have 2 Modals: Modal-1 and Modal-2.
When a user is inputting information in Modal-1, they have the option to click on a button within Modal-1 to navigate to Modal-2 and then return to Modal-1 after completing the necessary actions in Modal-2.
Initially, when Modal-1 is triggered, a scrollbar appears due to the large amount of information present in the modal.
The problem arises when the user transitions from Modal-1 to Modal-2 and back to Modal-1 - the scrollbar briefly appears and then disappears, causing the 'SAVE' button to become hidden until the user zooms out.
I am puzzled by why the scrollbar is visible initially and then disappears. Despite my attempts, I have been unable to find a solution.
In my stylesheet, I have the following styles applied to the modal:
.modal { overflow: visible; }
.modal-body { overflow-y: visible !important; }Here are the headers for my Modal-1:
<div class="modal fade" id="EventModalForm">
<div class="modal-dialog" style="max-height:100%; max-width:100%;">
<div class="modal-content">
<div class="modal-header">
</div>
</div>
</div>
</div>If anyone could provide assistance in resolving this issue, it would be greatly appreciated.