Facebook发送按钮导致水平滚动 [英] Facebook Send button causing horizontal scroll

问题描述

我工作的Ruby on Rails的，只是集成Facebook发送项目中的按钮。当在发送按钮点击后，弹出窗口是走出去的画面，造成水平滚动条。我尝试了一些博客，网站和计算器几个解决方案，但未能解决问题。

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.

下面是一些屏幕截图：

单击发送按钮 http://imgur.com/wv2HZ 前


2. 单击发送按钮 http://imgur.com/BRUeT 后

1. before clicking Send button http://imgur.com/wv2HZ
2. after clicking Send button http://imgur.com/BRUeT

在code在View：

The code in View:

fbsend.html.erb（使用HTML5 code）

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

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?

感谢

推荐答案

我相信，评论框放置到自己的iframe中，所以你应该能够从按钮的/ etc独立重新定位在自己的CSS它。

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.

祝你好运！

这篇关于Facebook发送按钮导致水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！