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
Related
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.
I am having some trouble with a webkit bug [1]. Long story short, if an iframe has an ancestor with -webkit-transform: scale(x) the content of the iframe is scaled 2 times.
The platform on which this is happening is iOS5 (both in Safari and UIWebView). I have tested on iOS4, iOS6 and the latest nightly build of webkit and I can not reproduce it there. So the issue seems to be fixed in the newer releases.
I tried the workaround described in one of the bug comments [2] and it does not fix the problem completely. In order for it to work I had to first add -webkit-transform-style: preserve-3d and then inside a timeout add -webkit-transform: scale(x) to the same element. This would have been acceptable, but if any inherited property is changed in one of the iframe's ancestors, the workaround is nullified and the content scaled 2 times again.
Does anybody know any better way to work around this issue ?
Links:
[1] Link to bug : https://bugs.webkit.org/show_bug.cgi?id=15676
[2] Description of workaround : https://bugs.webkit.org/show_bug.cgi?id=15676#c10
I had the same issue and managed to resolve it this way:
webkit-transform: scale(x)
zoom: 1/x
Also you might want to have the same fix for scaling pretty much anything on Android 2.x
I still have an issue though on iOS5.1 that despite content is scaled correctly, if part of it was behind the visible viewport (under overflow: hidden), it still appears blank in scaled iframe.
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.
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.
The iPhone is admittedly not the best platform for viewing code, but I'd like to optimize the mobile portion of my web site for the device as best I can. I'm having trouble getting code (Java code, in this case) to display properly.
I'm using <pre> tags, along with some CSS to render a nice little background for the code. This looks OK:
However if you scroll to see the rest of the code, you get this:
The text inside the <pre> is rendered properly, but the background color stops at the width of the device. I have tried this in the simulator, in a 3G device running 3.0, as well as in a 3G running 3.1-beta and they all behave this way.
It does render fine in Safari on the Mac; just not on the iPhone.
Here is the HTML:
<pre>
String input = readUserInput(); // assume defined elsewhere
int i;
try {
i = Integer.parseInt(input);
} catch (NumberFormatException exception) {
System.err.println("You entered an invalid integer: " + exception.getMessage());
}
</pre>
And the CSS:
pre {
font-weight: bold;
border: 2px solid green;
background: #669999;
padding: 5px;
}
What a curious bug! I'm able to reproduce it on a real live iPhone. I'm guessing it's caused by something about how iPhone processes the viewport settings. One thing you should clarify is what viewport setting you have in your page (via a meta tag). Your screenshot suggests it's something smaller than the default 980 pixel size. I tried tinkering with the viewport in various ways but couldn't stop this bug from occurring.
I have one workaround, which is to set a width parameter on the pre block. Ie:
<pre style="width: 50em;">
This is a bad solution for several reasons; it makes a fixed width block, it screws up your border, etc. But it does result in a coloured background block that's wider than the viewport. Maybe it's acceptable to you or maybe it's the basis of a real solution.
Have you tried setting a width or min-width for your pre block? Or perhaps trying a different position or display attribute for the block. Could try floating it or display: table. Just some ideas.
I'm not sure if pre accepts the overflow attribute but I'd try setting that, if not, wrap it in a div and do the background there, will give you slightly more freedom in your formatting options. (for instance if you wanted to have several blocks of code with "captions" underneath each part)