How to remove scrollbars from Facebook iFrame application

Asked 16/11, 2010 at 14:3 Answered 9/2, 2021 at 7:46

I have created a facebook iframe application and set the dimensions to Auto Resize in the Facebook Application settings page but still a horizontal scrollbar is shown at the bottom in IE and Google Chrome. Works fine in Firefox. Any solution ?

Jadejaded answered 16/11, 2010 at 14:3 Comment(1)

If you are using Chrome there is a known issue where the facebook page itself (not the iFrame) actually has a horizontal scrollbar. They haven't fixed it yet. developers.facebook.com/bugs/182748101891780 – Coburg 24/8, 2013 at 6:0

It's explained how to do this here: http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html Basically you should use

window.fbAsyncInit = function() {
    FB.Canvas.setAutoGrow();
};

plus make sure that your html and body tags are set to overflow:hidden so you don't get those briefly shown scroll bars that are so annoying

<html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden">
    <head>
  <!-- Header stuff -->
 </head>
 <body style="overflow: hidden">

Logo answered 19/2, 2011 at 21:41 Comment(5)

i saved my bacon with <body style="overflow: visible"> – Altamira 11/7, 2011 at 21:5

You really don't want to add "overflow: hidden" onto body as it'll disable vertical scrolling too. See https://mcmap.net/q/428986/-facebook-like-button-causing-horizontal-scrollbar for a proper solution. – Composition 3/4, 2012 at 0:25

@Composition that is the whole point, you don't want the vertical scrollbars to ever show so it doesnt look like an i-frame but something embedded in the facebook page. The point of the setAutoResize is to resize your i-frame so it doesn't need scrollbars. – Logo 22/4, 2012 at 22:18

I understand that, but it's a rather heavy handed solution (especially if someone is looking up this fix for their non-iframe page). Rather than applying it to the whole document, you should restrict the width to the offending element. It'll save you trouble in the future. – Composition 23/4, 2012 at 23:36

@Composition I do not know if you have ever tested it on facebook before but the problem is that even if you do set the width (which I always do) I dont know the height and that is what the facebook javascript takes care of. If you refresh your app many times there will be a few times where scrollbars will show for a split second and then go away. This happens rarely like once every 10 refreshes but it happens. The only fix is the overflow hidden. I tried your way when I first started with facebook apps since it was the logical thing to do but it just does not work smoothly 100% of the time that way. – Logo 29/4, 2012 at 21:22

You also need to start the timer to call autoresize code. In your applications HTML do:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
};

Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize(50);
};

If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:

window.fbAsyncInit = function() {
    FB.Canvas.setSize();
}

You can even pass the desired size as parameter

window.fbAsyncInit = function() {
    FB.Canvas.setSize({ width: 520, height: 600 });
}

Absorbance answered 16/11, 2010 at 15:3 Comment(1)

Still shows a scroll bar briefly before disappearing when the canvas performs the resize. Very jarring for users. – Depersonalization 10/1, 2011 at 22:32

Facebook must remove SCROLLING="YES" attribute of iframe of canvas app and append overflow:auto to style attribute OR provide us with a function by which we can change scrolling attribute value to NO according to our apps.

Tele answered 15/10, 2012 at 15:50 Comment(0)

I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.

What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).

I hope this help you.

Screeching answered 30/1, 2012 at 19:44 Comment(0)

Might sound obvious, but have you tried CSS overflow: hidden on the iFrame?

Michelemichelina answered 16/11, 2010 at 14:31 Comment(0)

I have had this problem in the past. While resizing might work, there is a maximum width on the Facebook canvas. It is likely that your body element has some kind of default padding / margin, and therefore it's box is bigger than the max width.

Try using a reset style sheet that clears default styles: http://developer.yahoo.com/yui/3/cssreset/

Depersonalization answered 10/1, 2011 at 22:31 Comment(0)

Well, I will share some techniques collected from several resources that can be implemented to get rid of your unwanted scroll bars of your iframe facebook app. So, here is the first technique:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<script type="text/javascript">
function framesetsize(w,h){
var obj =   new Object;
obj.width=w;
obj.height=h;
FB.Canvas.setSize(obj);
}
</script>
</head>
<body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
<div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
<div style="height: 2400px">
//Your content
//Goes here
</div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>

Using Latest Javascript Facebook SDK [Without using Body OnLoad]

window.fbAsyncInit = function() {
FB.init({
appId  : '142388952486760',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true // parse XFBML
});
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);
}());

Using the Old Facebook Javascript SDK

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(
["CanvasUtil"],
function(){
FB.XdComm.Server.init('/xd_receiver.html');
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>

<script type="text/javascript">
FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });
</script>

Plump answered 26/7, 2011 at 10:54 Comment(0)

Horizontal scrollbars are always caused by the width of your HTML page being larger than the area of the iframe.

Make sure you set the right width to your or containing .

Set the width in your CSS file and set the overflow property.

If it's a Tab iframe app you can set it like this:

body{
  width:510px;
  overflow:hidden;
}

Maddox answered 6/9, 2011 at 20:37 Comment(0)

Being frustrated about this problem of Firefox for a long time, finally found the best solution, which is here from Roses Mark. She proposed several ways, however only the body onload stably removes scrollbar in Firefox 10.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <script type="text/javascript">
            function framesetsize(w,h){
                var obj = new Object;
                obj.width=w;
                obj.height=h;
                FB.Canvas.setSize(obj);
            }
        </script>
    </head>
    <body onload="framesetsize(500,3300)"> <!--specify the height and width for resize-->
        <div id="fb-root"></div> <!--this div is required by the Javascript SDK-->
        <div style="height: 2400px">
            //Your content
            //Goes here
        </div>
        <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
    </body>
</html>

Hertzog answered 23/2, 2012 at 10:22 Comment(0)

Apart from this code:

window.fbAsyncInit = function() {
    FB.Canvas.setAutoResize();
};

Also update Canvas Height setting in FB developer app settings:

Set canvas height to Fixed instead of Fluid. This will remove horizontal and vertical scroll bars.

Hang answered 4/5, 2012 at 8:37 Comment(0)

I've tried many things listed here, but what really worked was:

Configurations -> Advanced -> Canvas Settings, set a fixed width and height

It's also important to notice that if you don't provide a privacy policy url, facebook won't save this configurations.

Jeanajeanbaptiste answered 9/7, 2012 at 15:19 Comment(0)

I might be late but I have very easy solution. this might help

inside the page plugin div:

<div class="coverhack"></div>

and on css:

.coverhack {
    position: absolute;
    width: 520px;
    height: 440px;
    background-color: rgba(0, 0, 0, 0);
    bottom: 0;
}

what have I done is only covering the scrollable part so it cant be scrolled. not might be the perfect answer but it works the same with the fastest delay among all answers.

Fauman answered 9/2, 2021 at 7:46 Comment(0)

-4

I found the perfect solution! Make sure to put the following CSS code into the <head> area:

<style>*{margin:0;padding:0;}</style>

The scrollbars are actually shown because there is a default padding or margin given. Hope I could help!

Selfwinding answered 23/6, 2011 at 14:11 Comment(1)

To anyone finding this answer: PLEASE DON'T DO THIS. All sorts of items are supposed to have margins and paddings by default. The * selector is only for use in very specific cases. This isn't one. Use a reset stylesheet like in thesmart's answer above. – Dullish 15/8, 2011 at 15:34

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags