Home/ Questions/Q 8107051
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T00:38:52+00:00

I am trying to absolutely position a TinyMCE editor at a set position using

  • 0

I am trying to absolutely position a TinyMCE editor at a set position using CSS. In Chrome, this works fine. In Firefox however, the editor disappears. I am doing this in a complex application, but I was able to reproduce it with a very simple test case:

<style type='text/css'>
    div.container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    min-height: 600px;
}

div.container div.text {
    border: 1px dashed black;
    overflow: hidden;
}


div.container div.text div.mceIframeContainer {
    position: absolute;
    top: 0px;
    left: 0px;
}

  </style>



<script type='text/javascript'>//<![CDATA[ 
Event.observe(window, "load", function(){

function setup()
{
    var myTinyMCESettings = {
        mode: 'none',
        width: '100%',
        height: '9000px',
        body_class: 'TypeRegion'
    };

    var editorId = $(document.body).down('div.container div.text div.editor').identify();

    tinyMCE.init(myTinyMCESettings);

    tinyMCE.execCommand("mceAddControl", true, editorId);
}

setup();

});//]]>  

</script>


</head>
<body>
  <div class="container">
    <div class="text" style="position:absolute;top: 2in; left:2in; width: 2in; height: 3in;">
        <div class="editor">Enter text here</div>
    </div>
</div>

Here is a JSFiddle for this test case. Compare Chrome to Firefox, note how the editor is apparently missing in firefox… what is causing this, and how can I correct this?

UPDATE: I tried making the td have relative positioning, no change:

div.container div.text table tr td {
    position: relative;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The editor is there in Firefox – it just has a width of zero, making it invisible. Since you’re defining a set width for your containing block div.text anyway, you can use that value to give an explicit width to div.mceIframeContainer in order to guarantee that the width calculation will be consistent cross-browser. I did this in an oninit handler, but you can decide what approach would be best in your case.

    Setting the width explicitly makes the editor appear, but exposes another issue in Firefox where the editor is shifted higher than desired. This appears to be caused some elements that TinyMCE creates, namely the relatively positioned span that it inserts a table into.

    I’m not entirely sure why it sticks a table inside of a span to begin with, but the offset observed in Firefox is seemingly related to the fact that the span is both relatively positioned and an inline element. Applying the style

    .defaultSimpleSkin {
    display:block;
}

    fixes the problem. You can check out this jsFiddle example to see the changes in action.

    • 0