0
310
ViewsAdjusting the layout of the contents of an iframe depending on the window size
I have an iframe that links to a Fortran code documentation created using FORD. It has the same layout as this page. I want to use an iframe on my sphinx website to display its contents on one of its pages. However, linking to it causes the layout of the iframe contents not to change as it would if only the documentation was opened. Instead, it pushes the full-sized window to the left so that only half of it is visible, like in the following picture:
Is there a way to scale the iframe contents down as the window layout changes so that the borders are first minimized, and then a scrollbar is displayed at the bottom? The iframe is embedded into the site as follows:
.. raw:: html
<iframe src="path_to_FORD_documentation_index.html" style="position:fixed; top:auto; left:auto; bottom:auto; right:auto; width:100%; height:100%; border:none; margin:auto; padding:auto; overflow:hidden; z-index:999999;">
Your browser doesn't support iframes
</iframe>
I have already tried the javascript-based approach from this question, but this only created a scrolling bar at the bottom of the main page but didn't resize the iframe's contents.
1 answers
Answer question0
Without having much to go on, I think your problem is in your height and width properties. Your DOM is loading the iFrame before the iFrame is loading the content. So when the element is created, it's got no width or height to it, so the iFrame defaults to min height/width. Solution could be to preload the iFrame link:
<link rel="preload" href="https://path_to_FORD_documentation_index.html" as="document">
then call iFrame as you do now
OR you could resize the iFrame in a function and call it after the page loads:
<script>
iFrame.width = iFrame.contentWindow.document.body.scrollWidth
iFrame.height = iFrame.contentWindow.document.body.scrollHeight
</script>