IE7 - setAutoGrow doesn't work

Question

I have created a facebook application that I am using inside a tab's iFrame.

I am using the setAutoGrow function of the Javascript SDK to make the iFrame expand until the end of the content.

From my observations, the setAutoGrow function does not work in IE7, and I can't figure out why. All other browsers (including IE8 and 9) are working correctly.

For testing purposes, I have created a gradient that is 1500px high.

Example gradient for testing purposed of 1500px height

As an example, I will post what it looks like in Chrome. As you can see, the gradient can be scrolled until the end (red color):

Gradient inside iFrame tab works as expected in normal browsers

And now comes what happens in IE7. The iFrame has a default height of 800px (as defined in the app settings). You can see that it stops at "turquoise", and the setAutoGrow function does not extend it to the desired height (1500px).

Gradient inside iFrame tab doesnt expand in IE7

The important part of my CSS looks as follows:

body, html { 
    overflow: hidden;        
    margin: 0; padding: 0;
}

    #wrapper {
        margin: 0 auto;
        width: 810px;    
    }

        #content {
          background: url(../img/bg.jpg) top left no-repeat;
          height: 1500px;
        }

And this is the javascript snippet I've placed just before the closing body-tag and after the fb-root tag:

window.fbAsyncInit = function() {

    FB.init({

        appId      : '...',
        channelUrl : '...',
        status     : true,
        cookie     : true,
        xfbml      : true

    });

    FB.Canvas.setAutoGrow();

};

I have found a bug report that dates back to the 1st of August, which has been closed by FB: https://developers.facebook.com/bugs/209607222498543?browse=search_5009002cb69058a73627413

I have read and applied the hints from the following topic: Facebook iframe FB.Canvas.setAutoGrow does not auto grow after initial load?

... but nothing seems to solve the problem.

Does anyone have an obvious hint, something I have overseen, or an easy solution/workaround for this problem?

While I was using IE7 DebugBar I noticed that it was having a problem loading a URL called "dimension_context.php". I will attach the screenshot.

IE7 DebugBar loading problem

Prolly won't help but worth a try... put after content container: `

` — Gil Birman, Aug 15 '12 at 02:31
I think you should set `Canvas Height` to `Fluid`, however I think the best way is to set up static height - it is the least risky:) — pmaruszczyk, Aug 17 '12 at 11:03
The problem ist that within my tab, I have various screens with different heights. — Marcel Kalveram, Aug 17 '12 at 11:12
+1. I have a clean IE7 install on Widnows Vista (via Virtual Box on Mac OSX) and it's having the issue you describe. Works in IE8 and all other browsers. My current work around is to just give IE7 the overflow-y scrollbar `html { overflow-x: hidden; overflow-y: scroll; } body { height: 100%; }`. — Chris Jacob, Sep 20 '12 at 03:25

score 1 · Answer 1 · answered Aug 17 '12 at 12:24

I am using this may be it helps you

<html>
<body>
    <div id="fb-root">
    </div>
    <script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    <script type="text/javascript" language="javascript">
        FB.init({
            appId: 'APPID',
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true// parse XFBML
        });
        window.fbAsyncInit = function () {
            FB.Canvas.setSize();
        }
        //  FB.Canvas.setAutoResize();
        FB.Canvas.setAutoGrow(7);
    </script>
<form></form>

</body>
</html>

apps.facebook.com/onlinesocialguru/ i m using above code foy my apps its working.. — Anant Dabhi, Aug 17 '12 at 14:09
Yes yesterday when before I write answer of your question I tested..in IE 7 — Anant Dabhi, Aug 18 '12 at 06:01

vpascoal · Answer 2 · 2012-08-22T15:35:48.530

You can see here that my tab is working on IE7:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script>
</head>
<body style="overflow:hidden">
<div id="fb-root"></div>
<!-- YOUR HTML -->
<script type="text/javascript">
window.fbAsyncInit = function () {
        FB.init({
            appId: 0000000000000, // App ID

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        FB.Canvas.setAutoGrow();
        FB.Canvas.setSize({ width: 810, height: 1417 });

    };



    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));
</script>
</body>
</html>

My app settings:

Page Tab Width: 810px
Canvas Width: Fixed
Canvas Height: Fixed at 1147px

If you want your tab to adapt to different heights try this in each page:

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" 
type="text/javascript"></script>
</head>
<body style="overflow:hidden">
<div id="fb-root"></div>
<!-- YOUR HTML -->
<script type="text/javascript">
$(document).ready(function(){
    window.fbAsyncInit = function () {
        FB.init({
            appId: 0000000000000, // App ID

            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            oauth: true, // enable OAuth 2.0
            xfbml: true  // parse XFBML
        });

        FB.Canvas.setAutoGrow();
        FB.Canvas.setSize({ width: 810, height: $(document).height()});

    };



    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        d.getElementsByTagName('head')[0].appendChild(js);
    } (document));

});
</script>
</body>
</html>

Check out an example:

https://www.facebook.com/pages/Vpascoal/215529398504982?sk=app_105369212942645 (click on the image)

I have tested both sites, but it is showing scrollbars, when the content height exceeds the iFrame height, see here: [IE7 iframe test 1](https://www.dropbox.com/s/h01ttvg9v7hpdi3/ie7-iframe1.png) and there [IE7 iFrame test 2](https://www.dropbox.com/s/ezzmt47e1o3qrun/ie7-iframe2.png). Maybe it has something to do with the fact that I am running IE7 virtually in Virtual Box? Can you confirm that this scrollbar doesn't appear in your case? — Marcel Kalveram, Aug 18 '12 at 07:32
Hi! I forgot to put this in my code: try it and now you will not see any scrollbars in IE7 — vpascoal, Aug 20 '12 at 09:54

score 1 · Answer 3 · answered Aug 21 '12 at 13:04

Have you tried busting the all.js's cache by adding a random GET parameter to it? Also, I'd rewrite the http:// part to // so the javascript file would load properly in case facebook is in https mode.

<script type="text/javascript" language="javascript" src="//connect.facebook.net/en_US/all.js?v1"></script>

IE7 - setAutoGrow doesn't work

3 Answers3