Theme CSS affecting TinyMCE-editor behavior

sage
1

Dunno what’s causing this, so I feel I have to examine this further. I notice that my TinyMCE is expanding a few hundred pixels every time I load a page to edit it. This also happens by a few pixels every time I click inside the editor.

According to the Chrome debugger, the height attribute on the TinyMCE inline style get a higher value (width: 100%; height: 1184px; display: block;).

I have broken this down and found out that this CSS in my main.scss (theme CSS) is causing this:
body, html { height: 100%; }

I don’t understand how or why this is happening. Is this a bug somewhere? Is it Roots Sage fault?

Some additional information:

  • I’m using latest Roots Sage
  • Bootstrap has been removed

Any ideas, please?

2

Well your stylesheet is part of the TinyMCE stylesheet by default. You can remove that and configure Gulp to compile a separate stylesheet for the editor if you wish, or modify the rule in your main.scss to something like:

body:not(#tinymce), html {
  height: 100%;
}
1 Like
3

Oh, this is nice info. I wasn’t aware of that. That’s a rather bold move though (of course, there’s probably things I am not thinking about). But, yeah. You tip me with some decent workaround. Thanks @cfx .

4

No problem, glad you found the info helpful.