Facebook Send button causing horizontal scroll

Question

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 and stackoverflow, but could not resolve the issue.

Here are some screen shots:

1. before clicking Send button https://i.sstatic.net/AiS7m.jpg
2. after clicking Send button https://i.sstatic.net/8x4Su.jpg

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&amp;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

Answer 1

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!

Answer 2

Adding display:none to #fb-root worked for me:

<div id="fb-root" style="display:none;"></div>