Menu
Facebook's mobile examples use the script: http://connect.facebook.net/en_US/all.js. This script adds to the div fb-root. My mobile site is 320px wide and I use the viewport meta setting. Including Facebook's script causes a big extra space on the right side of the actual content because it's settings it's contents to 575px wide. I tried including code to replace the 575px with 320px ("#fb-root").val().replace("575px","320px"); but that hasn't helped -- maybe I'm doing it wrong (using jQuery).
Anyone know how to restrict this to 320px?
Update: Found a bug a report on this with two work-arounds:
Set status to false in the FB.init. I can verify that this does fix the problem for me, but breaks the ability for users to login.
Move <div id="fb-root"></div> directly under <body>. This didn't work for me.
Source: http://bugs.developers.facebook.net/show_bug.cgi?id=18528
483
I used the following css style rule to beat this 575px #fb-root width problem:
#fb-root > div { left:-575px !important; }
That works because, if you locate the #fb-root node in, say, Firebug's HTML tree-viewer, you'll find that it contains a child div that is styled as follows:
position: absolute; top: -10000px; height: 0pt; width: 0pt;
i just set this in the css by default
#fb-root{display:none}
and when i need to use the FB dialogs(when calling FB.ui), i do this:
$('#fb-root').show();
and in the callback of the FB.ui, i do this
$('#fb-root').hide();
so here is an example:
var inviteFriend = function (msg) {
$('#fb-root').show();
FB.ui({
method: 'apprequests',
message: msg
}, function (response) {
$('#fb-root').hide();
console.log('sendRequest response: ', response);
});
},
this works for me, and i have tested on some devices.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
