When I try to scroll down on a modal launched using Bootstrap 4, I am unable to reach the bottom of the content. It works perfectly fine on desktop browsers like Chrome, Firefox, and Safari in responsive web design modes.
However, when I switch to an iPhone and use Chrome, Firefox, or Safari, scrolling to the bottom becomes difficult. I suspect that this issue is related to where the modal originates from within the main content, but I am not entirely certain.
If anyone has any advice on this matter, I would greatly appreciate it. I have been struggling with this for a few hours now, even though it seems like a minor problem.
Below is the CSS code for reference:
/* @MEDIA QUERIES */
@media (max-width: 480px) {
html,
body {
overflow-y: auto;
height: 100%;
}
.footer {
margin-top: 10px;
font-size: 10px;
}
#formQuestionList {
margin: 20px 0px 0px -20px;
font-size: 10px;
}
.modal {
top: 20px !important;
bottom: 20px !important;
right: 5%;
left: 5%;
width: auto;
margin: 0;
}
#formsModal {
/* padding: 100px 0px 100px 0px; */
overflow-y: auto;
}
#instructionsModal {
overflow-y: hidden;
}
.modal-open .modal .modal-dialog {
max-height: 100%;
}
.video-btn, .form-btn {
font-size: 18px;
}
#selectInfo {
font-size: 13px;
}
#instructionsList {
font-size: 11px;
}
.modal-footer {
display: flex;
justify-content: center;
}
HTML:
<!-- Forms Modal -->
<div class="modal fade" id="formsModal" role="dialog">
<div class="modal-dialog" id="formsDialog">
<div class="modal-content">
<div class="modal-header formHeader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="form-title"><span id='formType'></span></h4>
</div>
<div class="modal-body">
<form id='questionsForm'>
<div class="form-group">
<ol id="formQuestionList">
</ol>
</div>
</form>
<button id="submitForm" type="button" class="btn btn-primary">Submit Form</button>
</div>
</div>
</div>
</div>