Facebook發送按鈕導致水平滾動

我正在研究Ruby On Rails，並在項目中集成了Facebook發送按鈕。當點擊「發送」按鈕時，彈出窗口將離開屏幕並導致水平滾動條。我在一些博客網站和計算器上嘗試了一些解決方案，但無法解決問題。Facebook發送按鈕導致水平滾動

下面是一些屏幕截圖：

fbsend.html.erb（：

單擊發送按鈕http://imgur.com/wv2HZ
單擊發送按鈕http://imgur.com/BRUeT

在查看代碼前後使用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>

我怎樣才能解決這個問題，所以在彈出將適合屏幕並不會造成橫向滾動條？

感謝

來源

2011-09-26 Bongs

我相信評論框被放置到它自己的iframe中，所以你應該能夠獨立於按鈕/等重新放置它在你自己的CSS中。

該方法的一個問題是，評論框頂部的小評論「指針」三角形將不再針對觸發按鈕。父容器上的overflow:hidden可能允許您隱藏該部分的視圖。

祝你好運！

來源

2011-09-26 19:04:41 Dygerati

我需要應用'左：-343px;''要和span.fb_send_button_form_widget''。左：365px;''來向.nub'展示小部件如預期的那樣。但是當我在CSS中提到這些屬性時，它不適用於它。 +1的建議。但它沒有解決這個問題。 – Bongs

對不起，延遲 - 我只在Facebook按鈕演示頁面上嘗試過，但它似乎工作。 nub類是否適用於iframe中的內容？如果是這樣，那麼它將不會有任何影響，因爲您無法更改iframe的內容，而是需要將樣式應用於iframe元素本身。 – Dygerati

我剛纔看到你指的是nub類中的小指針。爲了隱藏這一點，你可能需要使用一些CSS技巧，可能在iframe的環繞容器周圍切掉頂部，並且有自己的邊框進行補償。感覺有點駭人聽聞，但這是你的內聯框架！ – Dygerati

良好，在圖片看來發送信箱，用戶點擊後，被延長了窗口的寬度有滾動條，以便您可以滾動到框。這很正常。您的選擇：

a。將發送按鈕向左移動，點擊後不會越過窗口邊界，因此不需要滾動條。

b。將overflow-x:hidden;樣式屬性添加到您的<body>元素的CSS中。這樣，用戶就無法看到整個盒子。

來源

2011-09-26 07:58:01 alt

添加display:none到#fb-root爲我工作：

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

來源

2012-01-27 12:10:26 kilo

Facebook發送按鈕導致水平滾動

回答

相關問題