TinyMCE: Editor not resized when browser is resized

oops, typo in title

One additional problem I noticed when enabling Font buttons in TinyMCE is that dropdown arrows get broken when window is resized. Also tested this adding style="100%" to textareas, and this particular problem persists.

Attached image shows what I mean. I added a couple of red arrows to point to the arrows that appear under the dropdown element.

This is not the same problem as reported on top, but still related to resizing the browser window, so I posted this here rather than opening a different issue.

A more generic title related to issues when browser window is resized.

This solution worked for me, so I would say RTBC.

Oh, I haven't thought about co-maintainership. I'm currently concerned on trying to help because it seems to be the time to do so, now that a) you're there driving the car, and b) me here needing this for the sites I'm working on. :)

My example was not hypothetical: I am using custom form layouts and needed to justify my stylesheets after applying this patch, which was a big pain. So, what I am thinking of is to enhance our tinymce.css, so that a potential floating textarea is cleared automatically.

Passing the width from CSS class would not work.

Looking at tinymce code, they compute the width of the editor like this:

w = s.width || e.style.width || e.offsetWidth;

That is a) tinymce width parameter, b) width retrieved from the textarea style attribute, and c) the current width of the textarea, which is absolute.

If we use CSS class, something like the snippet below, then a) and b) are undefined, so tinymce gets the width from c).

.form-textarea {
  width: 100%;
}

I would vote for solving this by exposing hooks that external modules and/or themes could implement to change editor settings on the fly.

Edited: Oh, and keep width 100% by default in tinymce editor implementation, as suggested in your patch above.

That's why I was thinking this could be solved by letting themes override TinyMCE settings.

clearing textareas left would work in your case, but not for others.

Themes set these things using their own CSS stylesheets, but that doesn't work in TinyMCE, as explained above. TinyMCE needs the width as an instance setting or inline style, otherwise the current width of the element is taken from the DOM, which is then a fixed width which is not correctly recalculated when the window is resized.

Then, we have use cases of themes using different % for textareas (garland is 100%, drupal.org is 95%, etc.).

Ideally themes would have to be able to influence the way tinymce deals with the width of the editor, as well as any other thing they need, yours in one valid example of this.

So, I would implement a setting that may cover the most common use cases (maybe that 100%, because garland), but also let themes override tinymce settings. So you leave them the option to do whatever they need.