Problem with iFrames and resizing to fit

I have a page with two iframes one above the other. They are linked to other pages on my domain which display data from a mySQL database. Over time the number of data rows increases and the tables become longer in height automatically. I need to display the two tables on the same page in this way but do not wish to have a long white space below the top iframe when it only has a few records to display. Later on it may have a large number of records and I don't want to have to use scroll bars.

I am looking for a way to increase the height of the iframes as the rows of records increase in number.

  • Alexander
    • DEV MAN’s Mascot

    Hey @caucus,

    For this you'll need to add a bit of javascript. With jQuery, we can find the height of the iFrame, then set the height of the iframe element in the main document based on the retrieved dimensions.

    The Javascript would look something like this, but you may need to tweak according to your site.

    jQuery(function($){
        $('iframe').load(function() {
            $(this).height( $(this).contents().find('body').height());
        });
    });

    Best regards,

  • caucus
    • Site Builder, Child of Zeus

    Hi Alexander,

    I tried it without success.

    But I did a bit more research and found that I needed to put the function you gave me in the theme functions.php. I have done this.

    The thing is I'm not sure how to code the wordpress page with the two iframes so that they sit close together when there are no records and then grow in proportion, whilst remaining close, as records are added.

    Kind regards

  • Alexander
    • DEV MAN’s Mascot

    Hi @caucus,

    I'm sorry for missing your post here. That's javascript, so you can't just place that in functions.php

    You need to put it in a javascript file, or you can use an action hook to include in function.php Here's an example:

    function auto_resize_iframe_callback(){ ?>
    jQuery(function($){
        $('iframe').load(function() {
            $(this).height( $(this).contents().find('body').height());
        });
    });
    <?php }
    add_action('wp_footer','auto_resize_iframe_callback');

    Best regards,

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.