Aug 5, 2011

Remove the scrollbars from your facebook canvas application

One of my facebook canvas applications always display the vertical and horizontal scrollbars with it, which is very annoying. By looking into the html source code with firebug, I found the app is hosted inside the <ifram> element with "smart_sizing_iframe" class. While another app without the scrollbars is hosted inside the <ifram> element with "canvas_iframe_util" class. I am pretty sure that my app code is the same in terms of canvas size setting.

After visiting my app settings from https://developers.facebook.com I got the tricky: go to the "canvas setting" under "On Facebook", you have two option for IFrame size: "Show Scrollbars" and "Auto-resize". By selecting "Auto-resize" and save, then refresh your application page, then you got it! Yes, the scrollbar get removed.

2 comments:

xxxxxxxxxxx said...

Hey - body{overflow:hidden;} I have found to be the best way to eliminate horizontal and vertical scrollbars within your Facebook canvas application. I have written a little blog post about it here: http://atomiku.com/2012/02/remove-scrollbars-and-get-your-facebook-app-iframe-to-autosize-to-height-fb-canvas-setautogrow/

Hope I have helped. :)

xxxxxxxxxxx said...

http://atomiku.com/2012/02/remove-scrollbars-and-get-your-facebook-app-iframe-to-autosize-to-height-fb-canvas-setautogrow/ There :)