Twitter Bootstrap Question posted in

Twitter bootstrap – TinyMCE in Bootstrap modal conflicting with Google Translate

TinyMCE is conflicting with the Google Translate widget when TinyMCE is in a Twitter Bootstrap modal. This occurs when using the latest releases of each. Specifically what is happening is the drop down menus are mislocated too high. This can be seen in this JSFiddle.

I’m not sure if this is fixable, but I’d like to determine what is causing this conflict and how it can be resolved without removing the Google Translate widget entirely.

The code I’m using to initialize the Google Translate widget is:

<!-- 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Many months later, I have discovered the problem and a hacky solution. The issue is that Google Translate sets the body tag's CSS to have position: relative;, among other rules. This is what's causing the drop down positioning issues.

    To fix it (since I'm using jQuery), I added this code:

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

    I'll admit, it's a bit hacky, but it gets the job done and seems to have no effect on Google Translate's functionality.


  2. 0

    I could not get to the bottom of it entirely but found a workable solution for the same problem on a site I am working on. It appears that the TinyMCE script is setting the CSS “top” attribute on the drop down elements correctly in relation to the viewport, but that there is some conflict with the CSS that Google Translate is injecting whereby the absolute (top) positioning of the drop down menus is applied to the document rather than the viewport or window.

    The work around I implemented was to set the modal window to open relatively positioned instead of fixed, overriding the .modal class with

    .modal {position:relative!important}

    as at

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

    Again this is not a solution as much as a workaround, but thought I would share what I came up with so far.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search