Facebook application height issue

Question

In my facebook iframe application, my home page is little long (about 1500px) but the secondary pages are smaller in height.

I see there is a lot of white space between my footer and the facebook's footer in the secondary pages.

I checked the iframe source and found the height property is set correctly, but there is another height value inside style tag which is retaining the homepage height.

<iframe class="canvas_iframe_util noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="600px" style="height: 1566px; overflow-y: hidden; "></iframe>

Below is the code I am using to resize the frame (which is in the master page)

<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
        appId: 'my app',
        status: true, // check login status
        cookie: true, // enable cookies to allow the server to access the session
        xfbml: true// parse XFBML
    });

    FB.Canvas.setAutoResize(7);

 </script>

My secondary pages are dynamic in size, so I can not use a fixed height. Any help to get ride the extra white space on my secondary pages are highly appreciated.

Thanks

Answer 1

I did a Facebook Canvas App the other day and I wrote this little code to take care of the height issue.

<script>
    FB.Canvas.setSize({ height: document.getElementById('wrapper').offsetHeight });
</script>

Of course this code demands a <div id="wrapper"></div> to wrap the whole page. You have to make sure all the things in the DOM has loaded before you fire it tho. That's why I put it just before the </body>. But there can sometimes be a bit of a problem with images with unspecified height. So either you specify the height of all your images or you could fire it with the help of jQuery and document.ready().

Answer 2

You could/should switch to using FB.Canvas.setAutoGrow(), since FB.Canvas.setAutoResize() will be deprecated shortly.

Then set the canvas height option in the app settings to: Settable (Default: 800px)

In your app, you can use FB.Canvas.setAutoGrow() without any parameters. I know this is essentially what you're doing already, but in my experience this has served me well. This also solves any problems when the height of your page changes after the initial page load.