Facebook Tab height auto resize - facebook

Question

I have my Facebook Tab I create who contains 3 div blocks, but the height is too big, and I have a scrollbar.
That's why I put "overflow: hidden" CSS with the body html.
And it was not working.
So I find a good thing on the web :
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize( { height: 1000 } );
}
</script>
That's only working on Firefox and Safari, but on Chrome & IE I don't have the scrollbar, but if I want to go on the bottom of my tab I have to left-click to can scroll and see the botton.
How I can adjust this thing on Chrome & IE ?
Do you think my CSS id bad ?

Answer 1

Check this out: https://developers.facebook.com/docs/reference/javascript/FB.Canvas.setAutoGrow/ and take a look at the other Canvas Methods links at the bottom of the left column.
It's been a few months since I've updated at my own app re-sizing code, and this stuff changes all the time, but the following is working for me placed just before the closing tag of your page. I can't remember for sure, but you may need style="overflow:hidden" in your opening body tag as well.
Hope this helps :)
<script type="text/javascript" language="javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript" language="javascript">
FB.init({
appId: '<YOUR_APP_ID>',
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true// parse XFBML
});
window.fbAsyncInit = function () {
FB.Canvas.setSize();
}
FB.Canvas.setAutoGrow(7);
</script>
There is also this I found for you: http://petetasker.wordpress.com/2012/10/31/facebook-set-auto-grow-a-version-that-actually-works/

Answer 2

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID'
});
FB.Canvas.setAutoGrow();
}
</script>

Answer 3

when calling the FB JS, makes sure it not absolute. Depending on viewers SSL settings it could throw an error and the autoresize will not work.
Wrong:
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>
Right:
<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>

Answer 4

None of the answers that used setAutoGrow() worked for me, so I had to calculate content height with JavaScript and then use setSize() accordingly.
window.fbAsyncInit = function() {
FB.init({
appId : 1234567890,
xfbml : true,
version : 'v2.3'
});
// Find the container that spans your entire content
var contentWrapper = document.getElementById("content-wrapper");
// Calculate element height using different methods because some browsers might calculate the height differently, then choose the highest
var contentHeight = Math.max(wrapper.scrollHeight, wrapper.offsetHeight, wrapper.clientHeight);
// Set canvas size
FB.Canvas.setSize({ width: 810, height: contentHeight});
};