This has surely been covered countless times, but I cannot find a working solution.
how do you get rid of the scrollbars in a Facebook iframe app in Chrome. Both IE & Firefox are fine.
Using the suggested CSS overflow:hidden, simply cuts off the content if its over 800px in height.
Even the Facebook Coca Cola iframe app has the content cut off!! see here
http://www.facebook.com/cocacola?sk=app_161193133389
this is what is also happening to my app in Chrome (v. 16.0.912.77 m)
add this to your canvas app's fb js:
FB.Canvas.setSize({ width: 520, height: X });
where X is the height you want.
If your app is fluid use:
FB.Canvas.setAutoGrow();
i had a similar issue: after adding FB JS SDK and
FB.Canvas.setAutoGrow();
i had to set
body{}
in css to keep the scroll bars from showing in chrome. In my case is was padding.
body{
overflow: hidden;
margin: 0px;
padding: 0px;
}
I would also try to set the size with a delay and experiment with it a little:
window.setTimeout("FB.Canvas.setSize({ width: 520, height: 1111 })", 2000);
Also don't forget to initialize Facebook with your app id ( FB.init ) before calling FB.Canvas.setSize or FB.Canvas.setAutoGrow.
You have to make a few tweaks to you app. First, add the following code to your page:
FB.Canvas.setAutoGrow(); to tell the Facebook SDK to resize the iframe if the contents is longer.
Add overflow: hidden to the <html> or <body> CSS
Check your app settings and make sure you have set the Canvas Width to 'fluid' and Canvas Height to 'fixed' (Go to Settings > Advanced > Scroll to Canvas Settings.)
All of these things should fix the scroll bars. If it doesn't, using something like "Inspect Element" in Chrome to see if something is causing the bars to appear.
There are various solutions you could try below. Please comment as to which one, or if none of them work and I will update this answer accordingly.
If you haven't already, try adding: body{overflow:hidden;}
You may also have javascript disabled.
Alternatively, you could set the fixed height for the app very high in the app settings, where it says: fixed[ ]. Also make sure that fixed is selected on your app settings.
If this happens on other apps, including that CocaCola page you mentioned, then it could possibly be the browser. Try updating. I use the Chrome 19.0.1084.56 and I have no problems, (except for me the height is always pushed to a 1200px maximum height).
Also look here: 'Choosing between Facebook iframe scrollbar or page cut off halfway' where there is a solution that you can try.
Edit: Also look here: 'Timeline page app height stuck at 800px'.
Edit: After some looking through the Facebook bug area, Facebook say this is not a bug on Facebook's end, therefore must be a problem in your code. (Source: 'https://developers.facebook.com/bugs/360687100649759')
If that doesn't work, then comment and say so and I will do some further research.
Related
I am developing an app, and it works 100% in android. In IOS I have 2 issues:
refresher does not work
<ion-refresher slot="fixed" #ionRefresh="doRefresh($event)">
there is a flicker when I touch the screen (may be related to background? I read some old posts about that)
ion-content.background{
--background: url(/bg.png) 0 0/100% 100% no-repeat;
}
I don't believe its relevant to this issue, but I am using vuejs.
I tested in various desktop browsers and it works as well.
So, we had 2 things here, and I thank #johnborges for following up
it was necessary to add the pullingIcon
link for Ionic docs
and the relevant paragraph
Using the iOS native ion-refresher requires setting the pullingIcon
property on ion-refresher-content to the value of one of the available
spinners. See the Spinner Documentation for accepted values. The
pullingIcon defaults to the lines spinner on iOS. The spinner tick
marks will be progressively shown as the user pulls down on the page.
the flicker, based on this link from stackoverflow I added a CSS DIV element instead of styling ion-content. It worked. I had to do a secodn CSS trick because one of my pages had fullpage slides and padding, but after that it worked
I had a fb:likebox that had proper width since last year. However recently suddenly the width of the box went wrong, it became much wider than it was before.
In the HTML source I still see the width="185" setting being there, but it has no effect.
The site can be seen here: http://tinyurl.com/m932dlq
Do you have any idea what might have changed? Did Facebook change something? I haven't found any other similar complaints.
Facebook has broken it, but you can revert it by a bit of CSS:
.fb-like-box span, .fb-like-box iframe {
width: 185px !important;
}
Facebook changed the fan box. The minimum width is now 292px. Here's the link for FB Developers
As the title says. Here is the URL if you have an iPad - How can I remove the responsive width of the Comments Plugin for iPads? (bottom of page) http://dev.assessmentday.co.uk/aptitudetests_numerical.htm
I ran into this too. I've worked around it by manually adding the data-mobile attribute set to false if I detect this is on an iPad:
<script>
if (navigator.userAgent.match(/\biPad\b/)) {
document.querySelector('div.fb-comments')
.setAttribute('data-mobile', 'false');
}
</script>
This could be improved to handle other tablets as well, but the best way to do that depends on how Facebook auto-detects "mobile", which I'm not sure of. Perhaps based on display width, perhaps based on the presence of touch event handlers, or perhaps indeed by user-agent on the server-side.
We are using the following code to generate a Facebook app request dialog in our Facebook canvas app.
var options = {
method : 'apprequests',
message : 'MESSAGE',
title : 'TITLE'};
FB.ui(options, function() {alert("called back");});
When we make this call in mobile Safari on an iPad, the height of the app request dialog extends well beyond the height of the canvas, so that the user scrolls down to see a very long dialog on top of a blank background toward the bottom of the page.
Please note that this does not occur in the Facebook iPad app itself, only when accessing facebook.com through mobile Safari.
I've tried calling FB.ui with the 'touch' option - doesn't help.
I've tried calling FB.ui with the 'iframe' option and an access_token - I get a 191 error which I haven't been able to figure out how to fix.
I've made various attempts to set styles for the DOM elements that I can see make up the app request, but this isn't working.
I've tried to use
FB.Canvas.setSize($('body').height())
to force the size of the canvas in the hopes that the overlaid dialog would respect it, but no such luck.
The other approach I've considered is attempting to manipulate some of these DOM elements in the app request dialog, but this is not looking promising.
Height setting on this canvas app. is "Settable". Changing it to "Fluid" doesn't help.
Any help is appreciated.
Wes
Update - 12/19/11: The following bug is now being worked on by Facebook: https://developers.facebook.com/bugs/255079837889099
OK, so i've been working on an FB app that changes height on every page. I, obviously used the setAutoResize function in my app layout and i have the following:
window.fbAsyncInit = function() {
FB.init({appId: '###', status: true, cookie: true, xfbml: true});
FB.Canvas.setAutoResize();
};
And it works fine in IE, Safari and Chrome but not in FF4. I also used:
window.setTimeout(function() {
FB.Canvas.setSize({height: $('body').height()});
}, 1000);
but no luck either. Does anyone experienced this before? tnx in advance.
Mark
An answer has already been provided, but I might as well post my solution to the problem. In Firefox the scrollbars are still part of the iFrame even if your page fits. They just don't have the blue scroller. This adds about 20px.
I don't think that your jQuery solution will work because height() doesn't take into account margin and padding. Maybe try this.
FB.Canvas.setSize({ height: $(document.body).outerHeight(true) + 20, width: 760 });
I added this to my css and it seemed to work (didn't have to muck with my autoresize):
body {
margin-top: -20px;
padding-top: 20px;
}
If you already have padding added to the top of your body, you will likely need to add 20px to it.
I assume it's because firefox measures the body height differently than other browsers.
Tested in ff8, chrome16 and ie9 with no negative repercussions.
This sounds like it might be a bug? Check out:
http://bugs.developers.facebook.net/show_bug.cgi?id=10889
If this is affecting you vote it up :)
FYI Warning! According to the Facebook Developer Roadmap FB.Canvas.setAutoResize will be renamed to FB.Canvas.setAutoGrow on July 5, 2012.
From the page:
We have renamed FB.Canvas.setAutoResize to FB.Canvas.setAutoGrow so
that the method more accurately represents its function.
FB.Canvas.setAutoResize will stop working on July 5th. We will
completely delete the function on August 1st.