CODEWITHSUNDEEP
facebookfirefoxfacebook-javascript-sdkfacebook-iframefacebook-apps
akshay3004
akshay3004

Reputation: 89

Resizing app iframe to get rid of all scrollbars in firefox

I have made an app which will be a FB page tab. Now I am trying to get rid of the scrollbars that come when the content exceeds 800px height. I used the following code to do this:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
    FB.init({
        appId : '<?php echo $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.setAutoGrow();
    }
    // Do things that will sometimes call sizeChangeCallback()
    function sizeChangeCallback() {
        FB.Canvas.setSize(); 
    }
</script>

Now this works fine for Google Chrome but shows scrollbars for firefox. In fact, initially there was no horizontal scrollbar which has now appeared. At some blog it was written that to get rid of this error we should set overflow to hidden. I tried doing that too but that cuts of the content. What is the solution to this? This is my CSS for html and body:

html {
    border: 1px solid #cccccc;
    min-height: 798px;
    font-size: 12px;
    overflow: hidden;
}
body {
    width: 495px;
    overflow: hidden;
font-size: 12px;
background-color: #f7f7f7;
color: #444444;
font-family: lucida grande, tahoma, verdana, arial, sans-serif;
}

Upvotes: 1

Views: 4464

Answers (4)

radu.luchian
radu.luchian

Reputation: 379

I came across this issue as well and after some hours of reading posts on the web I finally found a solution that works. Provided you have included this div in your markup:

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

Just add this script at the end of your file (before closing the body tag):

window.fbAsyncInit = function () {
    FB.init({
        appId:'APP ID',
        status:true,
        cookie:true,
        xfbml:true
    });
FB.Canvas.setAutoGrow();
};

(function (d, debug) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
    if (d.getElementById(id)) {
        return;
    }
    js = d.createElement('script');
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
    ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));

My issue was that depite working on Chrome, Safari and even IE, it still failed in Firefox and Opera. The problem was that the code above was written inside of a $(document).ready() function, so Firefox and Opera never fired the fbAsyncInit function. After moving the code outside, independent of other functions, everything is working perfectly.

Upvotes: 1

Gareth
Gareth

Reputation: 105

I have been having the same issue with firefox adding scrollbars to my facebook page/tab. The fix in the end was...

  1. In the app setting make sure you have 'page tab' and 'app on facebook' set up with the page tab/canvas url and the secure version.

  2. The code:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'FB_APP_ID', // App ID
      channelUrl : 'FB_CHANNEL_URL', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
    FB.Canvas.setAutoGrow();
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

Good luck!

Upvotes: 3

Mehul Hingu
Mehul Hingu

Reputation: 1240

Make one function as follows:

function grow()
  {

    FB.Canvas.setAutoGrow();

     }

Call this function on body onload event as <body onLoad="grow()">

Hope it works,cheers.

Upvotes: 1

Jan Olaf Krems
Jan Olaf Krems

Reputation: 2294

For me it often helped to set only overflow-x to hidden. That shouldn't cut off content while helping against some quirks in Firefox's size calculations.

EDIT: The problem is with the order of execution. The Facebook-SDK is executed first. It checks for the existence of window.fbAsyncInit - which is not defined at that point. Later fbAsyncInit is defined but Facebook never checks again so the function isn't executed ever. So setAutoGrow is not executed and the whole magic doesn't happen. Moving the definition of fbAsyncInit to some point before the FB SDK is included should solve the problem.

Upvotes: 0

Related Questions