Bootstrap模式中的TinyMCE與Google Translate發生衝突

當TinyMCE處於Twitter Bootstrap模式時，TinyMCE與Google Translate小部件衝突。這發生在使用每個版本的最新版本時。具體而言，下拉菜單錯位太高。這可以在這個JSFiddle中看到。Bootstrap模式中的TinyMCE與Google Translate發生衝突

我不確定這是否可以修復，但我想確定是什麼原因導致了這個衝突，以及如何在沒有完全刪除Google Translate小部件的情況下解決這個問題。

我使用初始化谷歌翻譯插件的代碼是：

<!-- Google Translate --> 
<script>function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:"en",floatPosition:google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT})}</script> 
<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

來源

2015-09-04 Wes Cossick

很多個月後，我發現了這個問題和一個黑客解決方案。問題在於谷歌翻譯將body標籤的CSS設置爲position: relative;以及其他規則。這是導致下降定位問題的原因。

要修復它（因爲我使用jQuery），我添加以下代碼：

<script> 
$(document).ready(function(){ 
    setTimeout(function(){ 
     $("body").css("position", ""); 
    }, 1000); 
}); 
</script>

我承認，這是一個有點哈克，但它能夠完成任務，似乎沒有任何效果在谷歌翻譯的功能。

來源

2016-03-01 03:14:33

我無法得到它的底部完全，但發現了同樣的問題在網站上可行的解決方案我正在努力。看起來，TinyMCE腳本正確地在下拉元素上設置了與視口相關的CSS「top」屬性，但是與Google Translate注入的CSS存在一些衝突，從而絕對（頂部）放置向下菜單應用於文檔而不是視口或窗口。

予實現的工作周圍是設置模式窗口，以打開相對定位，而不是固定的，重寫.modal類

.modal {position:relative!important}

截至

https://jsfiddle.net/b4etnbvc/1/

再次這不是一個解決方案，而是一個解決方法，但我認爲我會分享我到目前爲止。

來源

2015-10-28 21:07:21 SCouture

所以我看了一下，它修復了一些問題。儘管如此，下拉總是在它應該在的左側2px。我做了很多測試，並且不需要單獨處理任何資源（CSS，JS等）。但是，當Google Translate類創建時，這就是問題出現的時間。這可以通過延遲類的實例化來看到，但仍然在之前加載所有的資源。 –

我也審查了谷歌的代碼，似乎沒有什麼會導致這個問題。說實話，我對這個問題感到困惑。 –

Bootstrap模式中的TinyMCE與Google Translate發生衝突

回答

相關問題