CODEWITHSUNDEEP
facebookiframefacebook-graph-apifacebook-c#-sdkfacebook-iframe
MNVR
MNVR

Reputation: 875

Facebook Canvas Application iFrame Size Showscrollbars Issue

I am using Facebook C# SDK in my ASP.net application. I have an iFrame application whose iFrame Size set to Showscrollbars. Settings The application was working fine till yesterday, but today the iFrame is not stretching to its width (From the documentation Facebook's iFrame width is 760px Link here). The page in my application's width is set to 95%. So I think its not a width problem in my application. Please see this image. I have to use Showscrollbars option for my application. Did facebook Changed any settings for the iFrame Apps? Help please.

UPDATE Looks like facebook broke something or they are trying to get rid of scrollbar options. I have to change my application to use AutoResize Option. I made the following changes to my asp.net application and it is working fine except one issue (see at the bottom of the question)

<head runat="server">
  <title></title>
  <script type="text/javascript">
    window.fbAsyncInit = function () {
      FB.Canvas.setAutoResize();
    };
  </script>
</head>
<body>
<div id="fb-root"></div>
  <script src="//connect.facebook.net/en_US/all.js"></script>
  <script>
     FB.init({
                appId: '12345678', //replace with your facebook appid
                cookie: true,
                status: true,
                xfbml: true
              });
  </script>
</body>

iFrame stretches vertically when the content increases. That's cool but the ISSUE is Read Here on StackOverflow. I am working on it. If any one figures it out please let me know.

Upvotes: 2

Views: 3101

Answers (2)

haha
haha

Reputation: 1532

Use code below and it's works on all of my iframe apps :)

<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
    FB.init({
        appId: '123456789',
        status: true,
        cookie: true,
        xfbml: true
    });
    FB.Canvas.setAutoResize();

    FB.Array.forEach([200, 600, 1000, 2000, 5000, 10000], function(delay) {
        setTimeout(function() {
            FB.Arbiter.inform("setSize", FB.Canvas._computeContentSize());
        }, delay)
    });
</script>

Upvotes: 0

Tim
Tim

Reputation: 11

I had the same problem and fixed it with this simple bit of CSS in the iFrame page

body {overflow:hidden;}

everything still fits nicely, with nothing cut off. just gets rid of those pesky scrollbars! it certainly sounds like a bug, worked fine in all other browsers but FF 3.6 adding the above also has the advantage of not having the srollbars momentarily show on load.

Upvotes: 1

Related Questions