Facebook: Howto remove vertical scrollbar of iFrame in Application Tab

javascript facebook iframe scrollbar

16,853

Solution 1

After trying all of the solutions here, the final one which made the difference in Firefox was adding overflow: hidden for both the <html> and <body> styles.

CSS code as follows:

html {
    overflow: hidden;
}

body {
    width: 520px;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

IE7 also sometimes shows scroll bars unless you set <body scroll="no"> so keep that in mind also.

Solution 2

There have been issues with this feature since iframe tabs were introduced. The bug tracker contains quite a bunch of related reports. Basically, our experience is that it is completely unreliable. Sometime it works as advertised, sometimes it only works in some browsers, sometimes it works depending on the way you load the JavaScript SDK, sometimes one method works and the other doesn't, and sometimes it does not work at all.

Solution 3

This is the code that I use that works for me

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
 appId  : '7575671676127', //enter your app id here
 status : true, // check login status
 cookie : true, // enable cookies to allow the server to access the session
 xfbml  : true// parse XFBML
 });

 FB.Canvas.setAutoResize(7);
 </script>

Solution 4

Go to your App Settings -> Facebook Integration and choose "IFrame Size" = Auto-resize

Solution 5

Just make sure, you put overflow:hidden style rule for body element. Other case the firefox sometime decides to show the scrollbar anyway.

View more solutions

16,853

Denis

Updated on May 24, 2022

Comments

Denis almost 2 years
I've finished up my facebbok App and currently got stuck when watching the application as an facebook application tab....: the vertical scrollbar is displayed. Actually I've used the following code to auto resize the application iframe:
```
window.fbAsyncInit = function() {
    FB.init({appId: FBAPP_ID, status: true, cookie: true, xfbml: true});
    FB.Canvas.setAutoResize(100);
    //FB.Canvas.setSize();
  };
  (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);
  }());
```
The iframe successfully gets resized when I load the application tab, but the vertical scrollbar is visible. The body of my app has a width of 520px, the application settings are set to auto-size and iframe-mode. When I add overflow:hidden to the html-element the scrollbar is not visible - but I dont want to use overflow:hidden on the html-tag because the page is also be available as standalone-page.

Does anybody has some ideas how to get facebook to hide the vertical scrollbar when the content fits the iframe height? (or is this currently a facebook problem (...again) ?

Thanks in advance Denis
AndrewShmig over 12 years

I cant find link to "Facebook Integration" tab. Can you give me a direct link?
evanmcd over 12 years

This worked for me (except for Firefox, see @Sandor Toth's suggesting to add overflow: hidden to the body element)
evanmcd over 12 years

Thanks. That fixed Firefox for me.