Facebook iframe app scroolbars in Chrome

This has surely been covered countless times, but I cannot find a working solution.

how do you get rid of the scrollbars in a Facebook iframe app in Chrome. Both IE & Firefox are fine.

Using the suggested CSS overflow:hidden, simply cuts off the content if its over 800px in height.

Even the Facebook Coca Cola iframe app has the content cut off!! see here http://www.facebook.com/cocacola?sk=app_161193133389

this is what is also happening to my app in Chrome (v. 16.0.912.77 m)

Answers


add this to your canvas app's fb js:

FB.Canvas.setSize({ width: 520, height: X });

where X is the height you want.

If your app is fluid use:

FB.Canvas.setAutoGrow();

i had a similar issue: after adding FB JS SDK and

FB.Canvas.setAutoGrow();

i had to set

body{}

in css to keep the scroll bars from showing in chrome. In my case is was padding.

body{
    overflow: hidden;
    margin: 0px;
    padding: 0px;
}

I would also try to set the size with a delay and experiment with it a little:

window.setTimeout("FB.Canvas.setSize({ width: 520, height: 1111 })", 2000);

Also don't forget to initialize Facebook with your app id ( FB.init ) before calling FB.Canvas.setSize or FB.Canvas.setAutoGrow.


You have to make a few tweaks to you app. First, add the following code to your page:

FB.Canvas.setAutoGrow(); to tell the Facebook SDK to resize the iframe if the contents is longer.

Add overflow: hidden to the <html> or <body> CSS

Check your app settings and make sure you have set the Canvas Width to 'fluid' and Canvas Height to 'fixed' (Go to Settings > Advanced > Scroll to Canvas Settings.)

All of these things should fix the scroll bars. If it doesn't, using something like "Inspect Element" in Chrome to see if something is causing the bars to appear.


There are various solutions you could try below. Please comment as to which one, or if none of them work and I will update this answer accordingly.

  1. If you haven't already, try adding: body{overflow:hidden;}

  2. You may also have javascript disabled.

  3. Alternatively, you could set the fixed height for the app very high in the app settings, where it says: fixed[ ]. Also make sure that fixed is selected on your app settings.

  4. If this happens on other apps, including that CocaCola page you mentioned, then it could possibly be the browser. Try updating. I use the Chrome 19.0.1084.56 and I have no problems, (except for me the height is always pushed to a 1200px maximum height).

  5. Also look here: 'Choosing between Facebook iframe scrollbar or page cut off halfway' where there is a solution that you can try.

  6. Edit: Also look here: 'Timeline page app height stuck at 800px'.

Edit: After some looking through the Facebook bug area, Facebook say this is not a bug on Facebook's end, therefore must be a problem in your code. (Source: 'https://developers.facebook.com/bugs/360687100649759')

If that doesn't work, then comment and say so and I will do some further research.


Need Your Help

Cannot access class in ASP.NET

asp.net vb.net class

I have created an ASPX web application, that I have compiled and works fine when running through Visual Studio on my local PC.