可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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:

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

回答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!

回答2:

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

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

回答3:

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.