Why is my TinyMCE hidden textarea acting up?

Question

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 1

If you use production version of TinyMCE, you probably forgot to copy folders that tinymce.min.js needs. You need to have folders langs, plugins, skins and themes in the same folder as your tinymce.min.js file.

Answer 2

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.