Make iframe fill remaining page height

Anvil Q&A
1

What I’m trying to do:
I am embedding a google looker page on an iframe which sits below a button to “go back”.
What I’ve tried and what’s not working:
I’ve inserted the element on the page using appendTo. The problem is the iframe keeps shrinking vertically and not occupying the full height of the page. I’ve tried applying styles to it with height:100%, but it looks like its parents still don’t have full height, so it doesn’t want to enlarge further than that. The parents are a div created by anvil, “appGoesHere” and “anvil-root-container”. What is the correct way to make that component fillt he remaining height? Is there no cleaner way than applying styles to each native and automatically creative div untill they all have 100% height?
Code Sample:

    # Create an iframe element and set the src
    url = anvil.server.call('get_analytics_looker_url')
    iframe = jQuery("<iframe class='anvil-role-looker-iframe flex-column-fill'>").attr("src", url)
    iframe.appendTo(get_dom_node(self))
1 Like
2

I dug up some old code I used for a custom HTML form that displayed a full page iframe. Might be useful - not sure if it still works though.

<!DOCTYPE html>
<html>
<head>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        #myIframe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>
    <iframe id="myIframe" src=""></iframe>
    <script>
        
        function adjustIframe() {
            var leftNav = document.querySelector('.left-nav.anvil-measure-this');
            var topNav = document.querySelector('.app-bar');
            
            if (leftNav) {
                var leftNavWidth = leftNav.offsetWidth;
                var topNavHeight = topNav.offsetHeight;
                var iframe = document.getElementById('myIframe');
                iframe.style.left = leftNavWidth + 'px';
                iframe.style.width = 'calc(100% - ' + leftNavWidth + 'px)';

                iframe.style.top = topNavHeight + 'px';
                /*iframe.style.top = '56px'*/
                iframe.style.height = 'calc(100% - ' + topNavHeight + 'px)';
            }
        }
        
        function setIframeSrc(url) {
            var iframe = document.getElementById('myIframe');
            iframe.src = url;
            adjustIframe()
        }
        window.onload = adjustIframe;
        window.onresize = adjustIframe;

    </script>
</body>
</html>

The form’s python code:

from ._anvil_designer import ForumiComponentTemplate
from anvil import *
import anvil.server


class ForumiComponent(ForumiComponentTemplate):
    def __init__(self, **properties):
        # Set Form properties and Data Bindings.
        self.init_components(**properties)

    def form_show(self, **event_args):
        """This method is called when the HTML panel is shown on the screen"""
        self.call_js('setIframeSrc', 'some_url')
3

For my specific case I ended up using the “position: fixed” option, making it occupy full width and calculate appropriate height with calc, which worked for my case.

1 Like