I’m working on an existing project that is using tingle modal plug-in. I have linked it like so:
<!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 where I create the modal containing 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="https://stackoverflow.com/questions/69655258/sample.jpg" /></div>");
console.log(document.getElementById("sample").offsetHeight);
However, on load and if browser width is greater than 540px, the modal containing the image is cut-off (see figure below). What should I do to make the vertical scroll-bar immediately appear?
I noticed that when you zoom-in or zoom-out, or resize the browser, I then get the expected behavior of having the scroll-bar. I also noticed that on load, the image height is 0. I can’t set the image height to a pixel value because I’ll have several modals containing different images that vary on sizes.
You can also see the behavior here: CodeSandbox. Please do make the embedded browser width in CodeSandbox bigger first, then refresh to see what I mean.
I have tried the following. But it then adds the scroll bar even when the entire modal fits the 100vh, which is not desirable.
.tingle-modal {
overflow-y: scroll;
}
