Why is my TinyMCE hidden textarea acting up?

javascript dom tinymce dhtml
Click Upvote picture Click Upvote · Mar 26, 2009 · Viewed 16.6k times · Source

I have about 7 textareas on a web page, all of them are rich text editors using TinyMCE. However at page load only 1 of them is visible and the rest of them hidden. The user can click a 'show' link which would display the remaining textareas one by one.

However, I have a weird problem. All the textareas are setup like this:

<textarea cols="40" rows="20"></textarea>

However, only the textarea displayed on page load is the full size I want it to be. The remaining textareas are really small when I show them. So I'm thinking that perhaps they aren't rendered because they are hidden on page load.

How can I remedy this?

Answer

Shalom Craimer picture Shalom Craimer · Mar 26, 2009

Try adding some CSS to textareas that are hidden.

For example, use

<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea>

I think I ran into this, where TinyMCE's CSS overrides some of the default CSS behaviour. I ended up having to "re-override" it, and eventually edited the TinyMCE's css pages.

Related questions

How can I remove p tags that are auto added within tinymce

I am using tinymce 4.0.1 and it automatically adds p tags when you either start typing or hit enter. How can I dynamically remove these p tags and then reinsert the content into the editor.

Read More
How do I check if an element is hidden in jQuery?

Is it possible to toggle the visibility of an element, using the functions .hide(), .show() or .toggle()? How would you test if an element is visible or hidden?

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More