How to create visualforce page with iframe with auto resizing height?

  • I have a visualforce page with the following contents:

    <apex:page controller="TheController" sidebar="false">
        <iframe src="{!url.url__c}" scrolling="true" id="iframe_id" width="100%" height="100%"/>
    </apex:page>
    

    and this is the result: enter image description here

    How can I get the iframe height to take up the full browser window's height? I want to use as much of the page as possible without having two scroll bars (1 for the content of the iframe, and one for the parent page).

    Update: When using styling as recommended in the stack overflow question in the comment below, I ended up with the following code and result:

    <apex:page controller="AmbitionController" sidebar="false">
        <iframe src="{!url.url__c}" scrolling="true" id="ambition_iframe" style='position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:999'/>
    </apex:page>
    

    enter image description here

    Thanks for the suggestion, but it did not work. (unless I did something wrong)

    There are lots of questions and answers about this on stackoverflow such as http://stackoverflow.com/questions/5867985/iframe-auto-100-height but typically including various if/but qualifications. Some use JavaScript. So it will be interesting to see if you get an answer that works with how an apex:page is structured and in more or less all browsers.

  • The trick is to resize the iframe with JavaScript after you know the size of the browser viewport:

    <apex:page sidebar="false">
        <apex:iframe src="https://www.salesforce.com/" id="theFrame" />
        <script>document.getElementById('theFrame').height = window.innerHeight - 220;</script>
    </apex:page>
    

    Leave about 220 pixels for the Salesforce header and footer.

    iframe

    For bonus points, you can trim the container cell padding if you need and play with the 220 figure.

    <style>table#bodyTable {border-collapse: collapse;} table#bodyTable td {padding: 0;}</style>
    

    Edit: You can additionally deal with when the window is resized:

    <script>
        (function() { //this wrapper prevents pollution of the global scope
            var windowOnresize = window.onresize;
            window.onresize = function() {
                if (windowOnresize) windowOnresize(); //don't trample the handler; intercept it
                document.getElementById('theFrame').height = window.innerHeight - 220;
            };
        }());
    </script>
    

    Nope. Keeping it short for the sake of example rather than importing a library @KeithC

    it works in Chrome, and we only support Chrome, so I am happy. Thanks guys!

    I've added your `onresize` handler @edgartheunready

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM