iframe tag is vertically scrollable although I would expect it to vertically stretch 100%
+1
−1
I have an iframe tag to which I didn't set height so it has a default height which is 150px (at least in Google Chrome).
As a consequence, the iframe appears partially in such a way that constant scrolling down is needed to fully read it.
Possible solution
This reduced the scrolling in nearly 90%:
const iframeToWorkOn = document.querySelector("#prcf_iframe");
const paddingedIframeHeight = iframeToWorkOn.clientHeight;
iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + paddingedIframeHeight;
Notes
- I don't want to set arbitrary height to this
iframebecause it could cause blank areas on certain zooming levels and/or resolutions (?).
My question
How would you solve that problem?
Update
Apparently, the original code in the question worked about 90% and not 100% due to 50px of CSS padding (25px top and 25px bottom).
1 answer
+0
−1
I think that adding this to the original code helps:
iframeToWorkOn.height = parseInt(iframeToWorkOn.height) + 50;
This adds 25px top and 25px bottom compensating for CSS padding.
I also wrapped everything in a DOMContentLoaded eventListener:
window.addEventListener('DOMContentLoaded', () => {
// All code comes here;
});
To make sure that the moment the DOM content is loaded, the iframe would be rendered correctly.
0 comment threads
0 comment threads