Facebook 发送按钮导致水平滚动
我正在开发 Ruby On Rails，并且刚刚在项目中集成了 Facebook 发送按钮。当单击“发送”按钮时，弹出窗口将超出屏幕并导致水平滚动条。我在一些博客网站和 stackoverflow 上尝试了一些解决方案，但无法解决问题。
以下是一些屏幕截图：
- 在单击“发送”按钮之前 https://i.sstatic.net/AiS7m.jpg
- 单击“发送”按钮后 https://i.sstatic.net/8x4Su.jpg
代码在视图中：
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&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>
如何解决该问题，以便弹出窗口适合屏幕并且不会导致水平滚动条？
谢谢
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 https://i.sstatic.net/AiS7m.jpg
- 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&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
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我相信评论框被放置在自己的 iframe 中，因此您应该能够独立于按钮/等在自己的 CSS 中重新定位它。
这种方法的一个问题是评论框顶部的小评论“指针”三角形将不再瞄准触发按钮。也许父容器上的
overflow:hidden可以让您从视图中隐藏该部分。祝你好运！
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:hiddenon a parent container could allow you to hide that part from view.Good luck!
将
display:none添加到#fb-root对我有用：Adding
display:noneto#fb-rootworked for me:好吧，在图片中，发送框在单击后会使用滚动条扩展窗口的宽度，以便您可以滚动到该框。这很正常。 ：
您的选择 将发送按钮进一步向左移动，这样单击时，它就不会超出窗口边框，因此不需要滚动条。
b.将
overflow-x:hidden;样式属性添加到元素的 css 中。这样，用户将无法看到整个盒子。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.