Upon loading the page, I noticed that if the browser width is greater than 540px, the modal displaying an image gets cut off (see figure below). What steps should I take to ensure that the vertical scroll bar appears immediately?
https://i.sstatic.net/cJvvl.jpg
The current project I am working on utilizes the tingle modal plug-in. Here is how it is linked:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="tingle.min.css">
<style>
html, body {
height: 100%;
}
img {
height: auto;
width: 100%;
}
</style>
<title>Tingle Modal</title>
</head>
<body>
<script src="tingle.min.js"></script>
<script src="modal.js"></script>
</body>
</html>
modal.js is responsible for creating the modal with the image:
function createModal(content) {
let $modal = new tingle.modal({
footer: false,
stickyFooter: false,
closeMethods: ["overlay", "button", "escape"],
closeLabel: "Close",
cssClass: ["modal"],
beforeClose: function() {
return true; // close the modal
},
onClose: function() {
$modal.destroy();
}
});
$modal.setContent(content);
$modal.open();
}
createModal("<div id='modal'><img id='sample' src='sample.jpg' /></div>");
console.log(document.getElementById("sample").offsetHeight);
I have observed that when zooming in or out, or resizing the browser window, the expected behavior of having a scroll bar occurs. On initial load, the image height is set to 0. Setting a pixel value for the image height is not feasible as multiple modals contain images of varying sizes.
To view the behavior firsthand, visit this link: CodeSandbox. Ensure you adjust the embedded browser width in CodeSandbox and then refresh to see the issue.
I attempted the following solution, but it resulted in the scroll bar appearing even when the entire modal fits within 100vh, which is unwanted:
.tingle-modal {
overflow-y: scroll;
}