How to remove scrollbars from Facebook iFrame application

It's explained how to do this here: http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html Basically you should use 

window.fbAsyncInit = function() {
    FB.Canvas.setAutoGrow();
};

plus make sure that your html and body tags are set to overflow:hidden so you don't get those briefly shown scroll bars that are so annoying 

<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
    <head>
  <!-- Header stuff -->
 </head>
 <body style="overflow: hidden">

Facebook must remove SCROLLING="YES" attribute of iframe of canvas app and append overflow:auto to style attribute OR provide us with a function by which we can change scrolling attribute value to NO according to our apps.


You also need to start the timer to call autoresize code. In your applications HTML do:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
};

Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize(50);
};

If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:

window.fbAsyncInit = function() {
    FB.Canvas.setSize();
}

You can even pass the desired size as parameter

window.fbAsyncInit = function() {
    FB.Canvas.setSize({ width: 520, height: 600 });
}

Tags:

Facebook

Recent Posts