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 plex 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;
}
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 plex 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;
}
-
Do you really need css for
div.container div.text div.mceIframeContainer? It works without this style and shows the same result. And it works in both browsers. – Smileek Commented Jun 15, 2012 at 16:36 -
@Smileek I need to absolutely positioning the TinyMCE editor, otherwise there is a slight margin at the top of the
<td>which I can't seem to get rid of. If you like, I can create a sample to display this. – Josh Commented Jun 15, 2012 at 16:41 - I am investigating this further @Smileek, updates to follow. – Josh Commented Jun 15, 2012 at 16:45
- I supposed that it is something else in real case - just wanted to make it clear. So, the simplest solution didn't work. :) – Smileek Commented Jun 15, 2012 at 16:52
1 Answer
Reset to default 10The 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.