I created a custom facebook landing page using the same template that I used 3 times before. The problem is that this time the vertical scrollbar will not disappear. This is the resizing code I used:
<script type="text/javascript">// <![CDATA[ window.fbAsyncInit = function() { FB.Canvas.setSize({ width: 520, height: 1200});} function sizeChangeCallback() { FB.Canvas.setSize({ width: 520, height: 1200});} // ]]></script>
and at the bottom of the page:
<div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[ 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>
My CSS uses body {overflow: hidden;} , "auto resize" is selected inside my application. The problem is not that ifarme will not resize (it does), it means that I have an empty vertical scrollbar on the right that will not disappear.
Since the iframe design uses the entire width of 520 pixels, an empty vertical scrollbar gives me a terrible horizontal scrollbar. Judging by the width of the horizontal scrollbar, the vertical scrollbar calls it, and not anything (that I can find or see) in HTML / CSS, making the page wider than 520 pixels. The problem occurs in IE8, IE7 and Firefox.
You can see the page here .
I tried several variations of javascript code from several different sources, but no luck. Not sure if this is something small, I am missing or is this another facebook mistake. This problem is missing from my other iframe facebook landing pages. After searching for an answer and lacking nothing, I hit a wall with this.
source share