How to insert a full height iframe into a blank WordPress Dashboard?

0 Views

While trying to make a blank WordPress Dashboard and insert an iframe into the empty space, I found that the iframe can only have a fixed height.

But to integrate this customization nicely a 100% height is needed.

Read More

In this WordPress StackExchange Q&A, I wrote the technique to make a completely blank Dashboard, hiding the icon and title, Screen Options and all widgets (default and added by plugins).

Not blank WordPress Dashboard

If I use the following jQuery to inject an iframe, it doesn’t occupies a 100% height, no matter what CSS I add to the admin stylesheet… 

$('#wpbody').html(
    '<iframe src="http://example.com" 
     frameborder="0" id="myframe"  
     style="height:100%;margin:0;padding:0;left:0;top:0" 
     scrolling="auto" width="100%" height="100%"></iframe>'
);

The question is: how to make that iframe fill all the #wpbody space and keep it that way?

Post Views: 0

Related posts

Leave a Reply

1 comment

  1. Found the solution in this blog post (thanks a bunch, Jim, beautiful code!).

    Coupled with that WordPress StackExchange Q&A, the following will display a full size iframe inside the Dashboard screen.

    add_action( 'admin_head-index.php', 'wpse_73561_dashboard_scripts' );

function wpse_73561_dashboard_scripts() 
{
    ?>
        <style>
            .wrap h2, .postbox .handlediv, #icon-index { display:none }
            #wpcontent { margin-left:0 !important }
        </style>
        <script language="javascript" type="text/javascript">   
            function sizeIFrame() 
            {
                var helpFrame = jQuery("#myframe");
                var innerDoc = (helpFrame.get(0).contentDocument) 
                ? helpFrame.get(0).contentDocument 
                : helpFrame.get(0).contentWindow.document;

                helpFrame.height(innerDoc.body.scrollHeight + 35);
            }

            jQuery(function() 
            {
                sizeIFrame();
                jQuery("#myframe").load(sizeIFrame);
            });

            jQuery(document).ready(function($) 
            {
                $('#wpbody').html(
                    '<iframe src="http://example.com" 
                     frameborder="0" id="myframe" 
                     style="margin:0;padding:0;left:0;top:0" 
                     scrolling="auto" 
                     width="100%" height="100%"></iframe>'
                );
            });
        </script>   
    <?php
}