logo标签列表

Facebook发送按钮导致水平滚动

cssfacebookbuttonsendhorizontal-scrolling
3
我正在开发Ruby On Rails，并在项目中集成Facebook发送按钮。当单击“发送”按钮时，弹出窗口超出屏幕并导致水平滚动条。我尝试了一些博客网站和stackoverflow上的解决方案，但无法解决问题。
以下是一些屏幕截图：
1. 点击发送按钮之前 http://imgur.com/wv2HZ 2. 点击发送按钮之后 http://imgur.com/BRUeT 视图中的代码：
fbsend.html.erb（使用HTML5代码）
<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>

我该如何解决这个问题，使得弹出窗口适应屏幕大小，不会导致水平滚动条的出现？

谢谢。

3个回答
2
我相信评论框被放置在自己的iframe中，因此您应该能够在自己的CSS中独立重新定位它，与按钮/等等无关。
其中一个问题是，评论框顶部的小“指针”三角形将不再指向触发按钮。也许父容器上的overflow:hidden可以让您隐藏该部分以避免此问题。
祝好运！
我需要将 left:-343px; 应用于 span.fb_send_button_form_widget，同时将 .left: 365px; 应用于 .nub，以便按预期显示小部件。但是，当我在 CSS 中提及这些属性时，它不会应用于它。对于建议加1分。但它并没有解决问题。 - Bongs
1
抱歉耽搁了 - 我只在 Facebook 按钮演示页面上尝试过，但似乎可以工作。 nub 类适用于 iframe 中的内容吗？如果是这样，那么它将没有任何影响，因为您无法更改 iframe 的内容，而是需要将样式应用于 iframe 元素本身。 - Dygerati
我刚看到你在提到nub类的小指针。为了隐藏它，你可能需要使用一些CSS技巧，可能是在iframe周围使用一个包装容器来截断顶部并具有自己的边框来进行补偿。感觉有点hackish，但这就是iframe！ - Dygerati
我认为iframe是由FB JavaScript动态创建的，这就是为什么CSS没有被应用到它上面的原因。 - Bongs
1

对我来说，将#fb-root添加display:none就可以了：

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

在这张图片中，当单击发送框时，它会扩展窗口的宽度并带有滚动条，以便您可以滚动到框内。这是正常的。您的选择：

a. 将发送按钮向左移动，以便在单击时，它不会超过窗口边界，因此无需滚动条。

b. 在您的<body>元素的css中添加overflow-x:hidden;样式属性。这样，用户就无法看到整个框。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接