Facebook app as page tab problems - facebook

Question

This has been driving me completely nuts for months now. I have created an app for the sole purpose of displaying content customized for facebook from my company's website.
We want something like this: http://www.facebook.com/FarmersInsurance?sk=app_7146470109
But end up with this: http://www.facebook.com/DeltaFlexTravelers?sk=app_110411285713674
I can't get rid of the damn scroll bars! I've done everything that other answers to this kind of question suggest to no avail. I am explicitly setting the width and height using FB.Canvas.setSize(). nothing.
I am wondering if FB.Canvas.setSize() does not work when displaying the content as a page tab. If that is the case how do you get rid of the freakin' scrollbars on an app displayed as a page tab?

Answer 1

Even with the width set in IE I get scroll bars and cut off content. Had to cut it down to 510px. 520 is the max but different browsers may have different dpi settings. Either that or MS gave IE a different definition of a pixel.

Answer 2

Try creating a wrapper div that is the size you want (default 520x800 )and then set the overflow to hidden. Forces you to design within the space but got rid of the scrollbar issue for me. You'll probably also need to set the margin:0,padding:0 for that div as well. If you need more specifics you can look at http://facebook.com/xocialhost at the page tabs we've built. Feel free to look at the source stylesheet which is a modified version of the HTML 5 boilerplate that we've customized to work for our FB apps.

Answer 3

You need to do two things:
1. Use FB.Canvas.setSize(). As an extra hammer use the setAutoResize with a short delay.
2. Set your tab page CSS to overflow = hidden;
Here is the setSize Portion:
FB.Canvas.setSize();
}
function sizeChangeCallback() {
FB.Canvas.setSize();
}
FB.Canvas.setAutoResize(7);
And here is the CSS portion:
body {
margin: 0px;
padding: 0px;
overflow: hidden;
}

Answer 4

Did you try with setting up size? What I always do to get rid of scrollbars is to set 2 things:
Container of my app is always 520px width, and have overflow: hidden set
Height of tab I set with JS API is always bit bigger then actual HTML height.
It always work for me...
And this is the code I'm using:
window.fbAsyncInit = function() {
if(typeof(FB) != 'undefined') {
FB.init({
appId: 111111111111111, xfbml: true, status: true, cookie: true, oauth: true
});
FB.Canvas.setSize({ width: 760, height: 1250 });
}
};
(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);
}());