Menu
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
651
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.
129
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.
23
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>
Go to your App Settings -> Facebook Integration and choose "IFrame Size" = Auto-resize
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
