Facebook Send button causing horizontal scroll

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

标签： css facebook button send horizontal-scrolling

3条回答

Fickle 薄情

2楼-- · 2019-07-03 12:39

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!

0人赞添加讨论(0) 举报

看我几分像从前

3楼-- · 2019-07-03 12:48

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.

0人赞添加讨论(0) 举报

乱世女痞

4楼-- · 2019-07-03 12:54

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

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

0人赞添加讨论(0) 举报

Facebook Send button causing horizontal scroll

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间