Remove scrollbars from Facebook page tab app?
There are hundreds of posts about this on the internet, many of which are here on StackOverflow, but unfortunately none of the solutions mentioned seem to work for me. I have spent the better part of 6 hours tinkering with no success.
Here's what I have:
- I have created a Facebook app and added it as a Page Tab.
- I have added the app to a Facebook page here: https://www.facebook.com/pages/PARKROYAL-Darling-Harbour-Sydney/236917443012539?sk=app_195092900626979
But I cannot for the life of me set the height of the iFrame so that I can safely remove the scrollbars!
Here is the structure of my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PARKROYAL Magic Moments</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<MAIN CODE HERE>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '<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: 1642 } );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize( { height: 1642 } );
}
</script>
</body>
</html>
In my CSS I have also set body { overflow:hidden }
Answer
Have you tried FB.Canvas.setAutoGrow. You can use it like this:-
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '235024806624460',
});
FB.Canvas.setAutoGrow();
}
</script>