0

I have multiple apps on facebook and am having an issue with one app. It is rendering wider than 520px which is causing scroll bars to appear, even though all my content fits on the screen (just white space when you scroll over). I have double checked my css styling and settings and it appears to be the same as another app that is rendering correctly. Any suggestions?

Here is a link to the app giving me the issue.

https://www.facebook.com/slp.cc#!/slp.cc?sk=app_195351823894125

if you look at the 2012 snow show schedule, it renders correclty.

2 Answers 2

0

I had a similar problem and changed the css of body! Just try to do the following and change the numbers u need:

position:relative; top:-5px; left:-5px, width:520px,

2
  • I just made those changes... I have also tried max-width:520px; The only thing that seems to kind of work is setting overflow:hidden; but then it cuts off the bottom part of the text also... Jan 12, 2012 at 22:45
  • 1
    spelloveryou.com/… Here is the fix... Jan 12, 2012 at 23:15
0

You can try using FB.Canvas.setAutoResize(). It will get rid of both horizontal and vertical scrollbars.

Refer the following snippet:

<body onload="sizeChangeCallback()">

<div id="fb-root">
    </div>

    <script>
        window.fbAsyncInit = function() {
            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
                oauth: true
            });
            FB.Canvas.setAutoResize(); //set size according to iframe content size           
        };       

        (function() {
            var e = document.createElement('script');
            e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        } ());

        function sizeChangeCallback() {
            FB.Canvas.setAutoResize();
        }

    </script>

If the scroll bar still exists, you set the overflow style of the body as hidden.

EX: <body style="overflow: hidden; onload="sizeChangeCallback()"></body>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.