CKEditor textarea content not displaying/not updatable (Randomly)

Question

Textarea content does not display and the textarea is not editable (Happens randomly)

Only when I resize the Editor (Bottom right corner handle) the content starts to appear and the Editor is editable, this bug appears randomly and only tested in Chrome. Has anyone experienced this or any solutions would be helpful?

Example of my textarea:

<textarea rows="5" cols="80"><?php echo $output; ?></textarea>

And this is how I set it up:

// Set the ckeditor wysiwyg editor
function CKupdate(){
for ( instance in CKEDITOR.instances )
CKEDITOR.instances[instance].updateElement();
}          
$( 'textarea' ).ckeditor();

CKEditor Version 4.4.6

UPDATED with Screenshots

Click here to view screenshots

ISSUE RESOLVED

I have found the display Bug, within the output of the iframe:

Working Editor:

<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor,     detailed_description" aria-describedby="cke_125" tabindex="0" allowtransparency="true" style="width: 704px; height: 100%;"></iframe>

Editor with display Bug:

<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, customers" aria-describedby="cke_71" tabindex="10" allowtransparency="false" style="width: 0px; height: 200%;"></iframe>

Notice the difference in width between the two Editors/iframes, the editor which causes the issues is the one with width: 0px, somehow when you resize the browser or Editor it changes the width back to 704px.

Hope this will help someone in future...

Thank you for your response. This happens in a user access production environment/applications and as such cannot be created in jsFiddle. Even if I could add an example the issue is so random that it cant be re-created. The best I can do is to upload a screenshot when the error occurs. — Elroy
I think that it's one of the recent Chrome's rendering issues. It looks like they did a lot of "optimisations" in the engine because I remember at least two more different cases where some part of content wasn't visible. — Reinmar
Hi @Reinmar ...I also think its a Chrome related Bug, I finally managed to take screenshots after struggling yesterday to re-create the error, updated question with screenshots link: link — Elroy
Hi @oleq I'm unable to give a live example, I have uploaded screenshots instead: link — Elroy

Elroy Elroy · Accepted Answer · 2015-01-15T12:37:37

The display issue is caused by the Editor that outputs the iframe with size "width: 0px".

Next step, finding a possible solution:

CSS Set a predefined width for all Iframes, example [CSS][1];

OR

Jquery (Example: [change-iframe-width-and-height-using-jquery][2])

[1]: http://jsfiddle.net/7WRHM/1001/
[2]: http://stackoverflow.com/a/14913861/2842657

I have not tested thoroughly but this solution seems to solve the issue:

.cke_contents > iframe{
  width: 100% !important;
}

CKEditor textarea content not displaying/not updatable (Randomly)

1 Answers