Bootstrap 4 is being utilized in my current project, where I have made modifications to the modal style to achieve a fullscreen effect. The following CSS code showcases the changes:
.modal.show {
display:flex!important;
flex-direction:column;
justify-content:center;
align-content:center;
align-items: flex-start;
}
.modal-body {
padding: 0;
margin: 0;
}
.close {
color: #aaa;
position: absolute;
/* background: blue !important; */
border: 0;
top: 0;
z-index: 99999;
right: 3%;
float: none;
opacity: 1;
font-size: 40px;
font-weight: 400;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
.modal-fullscreen {
background: #fff;
min-width: 100%;
margin: 0;
}
@media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
@media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
@media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 100%;
}
}
.modal-dialog {
position:fixed;
padding: 0;
max-width: 100%;
margin: 0;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100vh;
overflow:auto;
}
Upon attempting to scroll down using the vertical scrollbar of the browser, I have encountered an issue where it does not respond, requiring the use of a mouse scroll wheel instead of direct clicking.
The root cause of this problem lies with the fixed positioning required for achieving the fullscreen effect. In need of assistance to identify and resolve this scrolling limitation.
For a visual demonstration of the issue, feel free to check out this live demo on jsfiddle: https://jsfiddle.net/odbjcpt2/1/
While using FLEX instead of FIXED may temporarily alleviate the problem in certain scenarios, it does not offer a viable solution within the context of my project as illustrated by the example provided.
Your expertise and guidance are greatly appreciated.