I have just launched a beta version of my Facebook Canvas Application called Pazooza (http://apps.facebook.com/pazooza), but I am having trouble getting rid of the horizontal and vertical scrollbars in Firefox. In my app settings canvas width is set to 760px and canvas height to fluid. Does somebody have a canvas html template that they have used that I can try and get to work in my site where firefox doesn't show the horizontal and vertical scrollbars? My main html table that holds all other content is set to 740px, so I don't see how this voilates the extra width put on by a horizontal scrollbar.
Any help or advice would be appreciated.
Related
My site is: alwaysriding.co.uk
I had updated and use media query to make it displays better on smartphone but I am having some problem with zoom in, zoom out.
When you go to my site with smartphone, you will see the horizontal scrollbar althought I had fixed the width = 480px.
You can see my css if you resize your browser windows.
Thanks in advance.
Chu
I am having an issue where the background image is cutting off to the right when you scroll left to right. This is happening when the app is hosted in the iframe for our business facebook page, not when you go to apps.facebook.com. I have changed the canvas width to fluid and it is not helping.
This is an example of what I am talking about, try scrolling to the right:
https://www.facebook.com/pages/TeleManager-Technologies-Inc/134181063301299?sk=app_241678922556190
This is the link for an actual app:
http://apps.facebook.com/irefill
As you can see in the second link, nothing is being cut off to the side. I tried playing with some css properties such as "overflow" and it still didn't help.
Thank you for your help.
I added a width to your body tag within side of the iframe body - {width:1000px;}
Because you hadn't declared a width on the , it was inheriting the width from the iframe it is nested in, which is 520px, the max-width for facebook page tabs.
Add on a width to your that is larger than the width of the image that is being cut off and you should be good to go.
You only have 520 pixel width to stay inside of on Facebook.
try limiting the
body{width:520px;}
UPDATE: I just learned that the iframe width is 480 px only when viewed over a secure connection, possibly because I am using social-server.com rather than having my own ssl.
I've designed a page tab to be displayed in a Facebook iframe. I designed it with 520 px in mind as the maximum width. However, Facbook loads the page in an iframe that is only 480 pixels wide.
It looks like it is supposed to be 520 pixels wide, because there is extra white space between the iframe and the next column. Also, I checked other pages with other custom tabs, and their iframe is 520 pixels wide.
So I wonder if this is a new limit on new custom tabs. I really appreciate your help!
Custom tab width is 520px, perhaps you need to set body margins to 0px in your css. Check this out.
i was struggling with this too - 480px wide is not actually a restriction, but it is the width your page will become if a vertical scroll bar get inserted - which happens if you don't specify the length of your page on the social server interface. you can change the dimensions, and hit the yellow refresh arrows, then refresh in facebook and it should look how you intend.
A question about Canvas Height setting in the Facebook Settings.
There are 2 options Auto-Resize and Fluid and they seem to function in the same way.
In the Canvas Tutorial, it seems that the 2nd option should be scroll bars for Canvas Height, so I'm assuming that Fluid option is a new feature.
But what is the difference between Canvas Height set to Auto-Resize or Fluid?
Here is the documentation
http://developers.facebook.com/blog/post/549/
If you would have placed your cursor over the question sign near the Canvas Height option, you might have seen this:
"Settable allows you to set the height via FB.Canvas.setSize() method in JavaScript SDK with default set to 800px. Fluid sets the height dynamically to fit the page and shows scrollbars if content exceeds the page size."
Also, the options are not Auto-Resize and Fluid, but Settable and Fluid
hey, i want to set a long page app without fb will limit the height of my app and append scroll
i did iframes& canvas and autoresize in settings and apply that code and its limits me in ie its shows scroll and in firefox its cuts the content:
the code is here:
http://pastebin.com/bmweWuTS
please help
I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - CSS + FireFox: hiding scrollbar on iframe with scrolling=yes) 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.
I am actually having the same issue, it started yesterday, but i have not changed the code. Facebook having some issues maybe?
I was using setAutoResize, but started getting the scrollbars, change to setSize (to something somewhat bigger then the content) and looks fine in firefox, but chrome still scrolls... odd but im thinking facebook problem.
Edit: Facebook forum thread on it: http://forum.developers.facebook.net/viewtopic.php?pid=315870#p315870