CODEWITHSUNDEEP
javascriptfacebookiframescrollbar
Denis
Denis

Reputation: 173

Facebook: Howto remove vertical scrollbar of iFrame in Application Tab

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

Upvotes: 9

Views: 16890

Answers (6)

Zgr3doo
Zgr3doo

Reputation: 1855

Actually FB.Canvas.setAutoResize() is known now as FB.Canvas.setAutoGrow(); it refresh every 100 milliseconds Facebook docs

so code should look more-less like this atm

<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
         appId  : '666',//your app id
         status : true,
         cookie : true,
         xfbml  : true
     });
FB.Canvas.setAutoGrow();
</script>

Upvotes: 2

Chris Nolet
Chris Nolet

Reputation: 9063

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.

Upvotes: 5

chwk
chwk

Reputation: 441

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.

Upvotes: 4

Adam Wydeman
Adam Wydeman

Reputation: 31

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>

Upvotes: 3

S&#225;ndor T&#243;th
S&#225;ndor T&#243;th

Reputation: 763

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

Upvotes: 2

thkouk
thkouk

Reputation: 43

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

Upvotes: 2

Related Questions