CODEWITHSUNDEEP
facebookiframefacebook-iframe
Angie McCoy Hills
Angie McCoy Hills

Reputation: 1

How do I remove/prevent scroll bars on new 810px wide iframe page

I created a wordpress theme 810px wide to fit the new Page width. But I am getting scroll bars. How do I prevent or remove the scroll bars?

Thanks!

Upvotes: 0

Views: 7648

Answers (4)

Kevin C.
Kevin C.

Reputation: 2527

You need to call FB.Canvas.setSize(); to remove vertical scroll bars. You will need to do his on document.ready, and any other time your page resizes. I advise against FB.Canvas.setAutoGrow(); as it's much more efficient to only call setSize() when needed.

You will need to call FB.init() prior to setSize(). If you were to use the sample code from the top of https://developers.facebook.com/docs/reference/javascript/ then you can call setSize() where it says 

// Additional initialization code here

Upvotes: 1

undercoverwd
undercoverwd

Reputation: 26

First, set the height and and width (810px) of your page in the CSS added overflow: hidden then set them again in the first line of code here and replace the opening body tag with this: (remember to replace YOURAPPID with your App Id too) 

<body onload="FB.Canvas.setSize({width: 810, height: 910})">
<div id="fb-root"></div>
<script>
(function () {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOURAPPID;
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
} ());
</script>

Upvotes: 0

MySQL
MySQL

Reputation: 181

overflow:hidden;

Add this to the div's CSS.

Upvotes: 0

Shreeni
Shreeni

Reputation: 3307

The FB guideline on managing scrolls bars is to use FB.Canvas.setAutoGrow function from the JS SDK. Please understand that the theme you put together should preferably be within about 800px (our implementations have gone up til 802px and it has worked fine), but the height can grow as much and with the integration of FB.Canvas.setAutoGrow, you should see only one scrollbar - that on Facebook's own page which should cover your entire content.

Upvotes: 3

Related Questions