Facebook Send button causing horizontal scroll
I'm working on Ruby On Rails, and just integrated Facebook Send button in a project. When Clicked on the "Send" button, the popup window is going out of the screen and causing horizontal scrollbar. I tried a few solutions on some blog-sites a开发者_Python百科nd stackoverflow, but could not resolve the issue.
Here are some screen shots:
- before clicking Send button http://imgur.com/wv2HZ
- after clicking Send button http://imgur.com/BRUeT
The code in View:
fbsend.html.erb (using HTML5 code)
<div class="right">
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-send" data-href="MY_SITE_URL"></div>
</div>
application.html.erb
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://connect.facebook.net/en_US/all.js#appId=MY_APP_ID&xfbml=1"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
FB.init({
appId: "MY_APP_ID",
cookie: true,
xfbml: true
});
</script>
How can I fix the issue, so the popup will fit in screen and won't cause horizontal scrollbar?
Thanks
I believe the comment box is placed into its own iframe, so you should be able to re-position it in your own CSS independently from the button/etc.
One issue with that approach is that the small comment "pointer" triangle on the top of the comment box will no longer aim at the triggering button. Maybe an overflow:hidden on a parent container could allow you to hide that part from view.
Good luck!
Adding display:none to #fb-root worked for me:
<div id="fb-root" style="display:none;"></div>
well, in the picture it appears the send box, upon click, is extending the width of the window with a scroll bar so you can scroll to the box. That's normal. Your choices:
a. Move the send button further left so upon click, it doesn't go past the window border, so no need for scroll bars.
b. Add a overflow-x:hidden; styling property to your <body> element's css. This way, users just won't be able to see the whole box.
加载中,请稍侯......
精彩评论