IE7 – setAutoGrow doesn’t work

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.

IE7 - setAutoGrow doesn't work

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):

IE7 - setAutoGrow doesn't work

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).

IE7 - setAutoGrow doesn't work

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 - setAutoGrow doesn't work

Jquery onclick doesnt work to IE7

This is my code. It works to Firefox, Chrome but not in ie7. arr makes (number + 1) for every line.. $(#div-id1 a).attr(onclick, function (arr) { return document.getElementById(‘row1’).value+= +

ie7: doesnt load eot fontface

as i looked into the network tab of ie9 (in ie7 mode) then i saw that there were no eot files loaded but in ie8 and ie9 how can i solve this problem? i am using windows 7 and ie9 in ie7 mode in ie6 an

Facebook Canvas setAutoGrow grows forever in IE

I am seeing a weird issue in Internet Explorer 9 on my Facebook pagetab when I have setAutoGrow to true. The height grows continuously without end. This is only happening in Internet Explorer for me.

jscrollpane scrollbar doesnt show in ie7

I made a simple jquery image loader and attached jscrollpane to it. It works nice in most browsers except in IE7 where the scrollbar doesnt show up. I cant find any solution to the issue. Anyone got a

jquery remove doesnt hide used space in ie6 and ie7

Couldn’t comment on this post, which states the problem I’m experiencing: http://stackoverflow.com/questions/1588671/jquery-remove-on-element-doesnt-hide-used-space I can reproduce this in IE7 (and a

Javascript doesnt work in IE9

The following javascript doesnt work in IE9, but works fine in Firefox. Any idea how to solve this? Thx. var element = e.srcElement || e.target; if(element != null){ if(element.tagName == INPUT) { /

jQuery trim function does not work in IE7?

I’m trying to call the jQuery text() function and run it through the trim() function to remove all trailing and leading whitespace. Seems to work great in Firefox, however, does not work in IE7 (refus

Getting overflow:hidden to work in IE7

Anyone know how to get this to work in IE7? The images are displayed side by side (due to overflow) instead of as a slider. http://tympanus.net/Tutorials/PortfolioZoomSlider/ I tried setting overflo

IE7 Scrollbar doesn’t work

I am fixing bugs for IE7 and this one has me stumped. The content in this page is larger than its containing div. IE7 is properly displaying a vertical scroll bar but the content is getting on top of

CSS work differently in IE7

for some reason, our paging looks different in IE7 vs. Firefox. the active page, does NOT get a border and background color in ie7 but it works just fine in firefox. here is the css we use. /* CSS Doc

Answers

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>

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)

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>