Up until about 3 days ago my Facebook canvas height would automatically adjust to fit the height of the window. This was something I was relying on because my app was responsive based on the canvas height. But now from out of nowhere the iframe_canvas iframe has a min-height property set to 800px. So if my window drops below that height, the canvas doesn't adjust to match. Anyone got any idea why this was suddenly added and more importantly how I might go about removing it?
I raised a bug with Facebook and they tell me that this is a known bug that they're currently working to resolve. In the meantime they've given me a workaround. All you need to do is set the "Canvas Fixed Height" setting to yes and then give it a value, say 10. Save that and then set the "Canvas Fixed Height" setting back to no. Save it again and the problem should be solved.
Related
My Facebook app (iframe / fluid / Fluid) shows a horizontal scrollbar. All attempts to remove it have failed.
I've tried all the solutions posted here, regarding FB.setAutoGrow(), FB.setSize(), etc... with no luck, but I found something interesting:
The scrollbars that appear are not related to my application, but related to the commercials at the side.
In the image you can see what I'm talking about:
To the left is a portion of my Iframe App. While the Iframe has been correctly resized (I've checked with Firebug - right) and their sizes are all right, there's that horizontal scrollbar at the bottom that affects the whole facebook window (not just my iframe).
The highlighted item on Firebug is what causes the horizontal scrollbar. They don't belong to the pagelet div (the div where the iframe resides): It's part of the carousel of recommended games to the right ! (and its width is > 5000 pixels).
When I first launch my app, there are no scrollbars fora little time interval, like 500ms, then they suddenly appear.
FB.Canvas.setSize , FB.Canvas.setAutoGrow seem to work, if I invoke them manually, they do resize the iframe, etc. but they don't remove the scrollbar.
I have body:overflow=hidden.
(may be related?) My app uses itself another iframe, width and height 100%, that is where the action takes place. That other iframe also has overflow=hidden.
This has traditionally worked. I stopped paying attention to Facebook for a couple months, then I saw this yesterday :(
What can be happening? My guess is somehow Facebook thinks my app needs horizontal scrolling, removes overflow-x:hidden in the main body in order to allow it, but this intererferes with their carousel that expects a hidden overflow... I don't know if this problem is at all my fault or a Facebook Bug.
Fortunately, this bug has been solved by Facebook. Everything is working now.
I'm having major problems getting TinyMCE having a fixed height on iPad. I have tried setting fixed heights on a container div, I have tried setting it via CSS, I have tried defining it in the init function.
Any help is greatly appreciated!
Tinymce is using an iframe to edit contents. Problem here is that on iPad/ios safari iframes do not get scrollbars. Instead safari will enlarge the iframe everytime when needed so that there is no need for scrollbars. This is the reson why setting a fixed height does not work on iOS-Safari.
You can access FB.Canvas.getPageInfo to read the information but they seem to be no way to scroll to a precise position in fluid height since FB.Canvas.scrollTo is only enabled when Canvas Height is set to "Settable (Default: 800px)" according to the developer documentation.
Any idea why? Is there any workaround?
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
i read it was going to be changed to 520px in early 2010, but i keep seeing pages that are new that are the older 760px width - is it safe to build at the wider width still or should we be building at 520px?
Do you mean a Page page or an app Canvas page? As far as I know, app Canvas pages are staying at 760px, and I think a reduction is very unlikely. The application tabs on Pages (and user profiles) are being reduced to 520px, though, so if your application is going to be displayed there then I'd work to that dimension.
Am I late? lol... yes...
It's now 810px ;)
So it sounds like the "max" width is 760px, but the "best" width would probably be what the newest is (as the old width might be dropped at some point)
They are unlikely to mandate reduction in width across all apps; the current max is 760px, so I would use that.
There are 2 types - Canvas Apps, which live on http://apps.facebook.com/YOUR_APP_NAME) or Page Tab apps which reside on a page like this one Starbucks.
Canvas width and height can be set as fluid or fixeed. Fluid means it will fill the whole page, so you have no width restriction. Fixed width is set at 760px.
Tab apps used to be 520px, but now you have the option of 810px as well - you can set this in the developer app.