One issue I'm facing is with a fixed-size modal dialog where part of the content gets cut off and becomes inaccessible when the window shrinks to cause an overflow. More specifically, when the window is narrowed horizontally, the left side is cut off and can't be accessed. And if it's shortened vertically, the top portion is also cut off and not reachable even with scrolling.
At the bottom, I will provide a fiddle with a simple example demonstrating this problem. The modal service uses its own HTML and CSS similar to the fiddle, with classes prefixed by ".modal-". The modal has a fixed size that covers the entire screen, and inside it, there's a body div meant to wrap the dialog received from elsewhere, which can have various sizes (typically fixed as shown in the example, but can vary since different dialogs are used). The class representing the passed-in dialog is ".dialog-container". Is there any solution to address these issues without disrupting the current functionality or assuming a specific size for the dialog being passed in? I've been stuck on this for some time now. Here's the fiddle link: https://jsfiddle.net/zrb42vex/
<div class="modal">
<div class="modal-body">
<div class="dialog-container">
Top
</div>
</div>
</div>
<div class="modal-background"></div>
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
}
.modal-body {
position: absolute;
height: fit-content;
width: fit-content;
background: #fff;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
}
.dialog-container {
height: 500px;
width: 600px;
padding: 20px;
}
Snippet:
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
}
.modal-body {
position: absolute;
height: fit-content;
width: fit-content;
background: #fff;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #000;
opacity: 0.75;
z-index: 900;
}
.dialog-container {
height: 500px;
width: 600px;
padding: 20px;
}<div class="modal">
<div class="modal-body">
<div class="dialog-container">
Top
</div>
</div>
</div>
<div class="modal-background"></div>