0

I'm creating a Facebook canvas application to be loaded in the iframe.

The height of the content could differ because of the dynamic data loaded there and cannot be set beforehand. The canvas should resize itself to fit the content automatically. I need to get rid of the vertical scrollbar in the iframe in all modern browsers.

I set "Canvas Height: Fixed at 800px" in the advanced settings of the application and use the solution with FB.Canvas.setSize() that is recommended:

<body>
    <div id="fb-root"></div>
    <script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({
                appId: 'NNNN', // My App ID is placed here
                status: true,
                cookie: true,
                xfbml: true
            });
            FB.Canvas.setSize();
            FB.Canvas.setAutoGrow(7);
        };

        function sizeChangeCallback() {
            FB.Canvas.setSize();
        }

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

It works fine in Firefox, MSIE 9, and Opera. But it does not work in WebKit browsers on Windows: Safari and Chrome.

Safari displays the following code for the canvas iframe:

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

What am I doing wrong? Is it possible to make it work in Firefox, MSIE, Opera, Safari, and Chrome at the same time?

Marina Bolbas
  • 1
  • 1
  • 2

2 Answers2

1

I've just encountered the seemingly same problem, I think this is a webkit related problem. After a lot of debugging I've come to the conclusion that FB isn't able to detect the height if your page's <html> tag is set to height:100%;. I hope this helps out some poor souls.

Ambidex
  • 755
  • 1
  • 5
  • 27
0

I only use ‘FB.Canvas.setAutoGrow();‘ (in the same place you have it, but without the parameter) to auto size my iframes and it works fine. Scroll bars are removed too. Could there be a problem elsewhere?

Snouto
  • 1,039
  • 1
  • 7
  • 21
  • Thank you! I have tried this variant too. But it also works in Firefox but not in Safari and Chrome. – Marina Bolbas May 28 '12 at 08:30
  • It works for me in Safari (5.1.1) on Mac, which makes me wonder if the problem is elsewhere for you - maybe a timing issue? Is the FB setAutoGrow() call being made *before* you finish dynamically bringing in page content? Just a thought, sorry I cant be of more help. – Snouto May 28 '12 at 08:33
  • I use Safari 5.1.5 on Windows now. – Marina Bolbas May 28 '12 at 08:36
  • FYI it also works in Chrome (19) on my Mac too. I doubt the OS is responsible for your problem more than something to do with timing of the autoSize call (just a theory though). Good luck. – Snouto May 28 '12 at 08:44