CODEWITHSUNDEEP
facebookfacebook-apps
SamiSalami
SamiSalami

Reputation: 677

New FB Canvas (810px) is cut off

I am developing an app on facebook. Since yesterday the resizing worked fine with the following snippets: CSS:

body, html { overflow:hidden; width:810px;margin:0; padding:0; border:0; }

Right before the closing body tag:

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" charset="utf-8">
FB.Canvas.setAutoGrow(true,100);
</script>

On Facebook I chose fixed for height and width, but that should not matter due to the autoGrow.

Since today it is just cut off, I tried the fluid settings but it did not change anything. I can remove the css rules for body and html, but then scrollbars are added.

So in short: The resizing does not work anymore at all.

Important to know (maybe) the app resizes dynamically (via JS) without a page reload.

The code did not change at all, so I am worried Facebook might have changed something?

Besides I also tried this js snippet without any effect (but it does the same anyway):

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function () {
window.setTimeout(function () {
    FB.Canvas.setAutoGrow()
}, 250)
};
(function () {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e)
}());
</script>

UPDATE:

The question was answered correctly, but one more thing to notice: Apply overflow:hidden just to the body, it worked after I removed html from the rule - worked with the old canvas, at least I used it before.

Also putting the code in the header did not change anything as well and is not the same as putting it at the beginning in the body area.

Upvotes: 1

Views: 1447

Answers (1)

Shane Van Niekerk
Shane Van Niekerk

Reputation: 28

Try this

<div id="fb-root"></div>
    <script src="https://connect.facebook.net/en_US/all.js"></script>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId : 'YOUR APP ID', //Your facebook APP here
          cookie : true, // enable cookies to allow the server to access the session
        });
      }

      window.onload = function() {
        FB.Canvas.setAutoGrow(91);
      }
    </script>

Upvotes: 1

Related Questions