Html 100% height and visual editor

sage
1

There is a well known issue with html with 100% height and the WordPress (tinymce) visual editor that grows when loading and with each UI interaction.

In sage 8.x I was able to fix it by applying 100% height to body when it is of a page (body.page), the 100% height of html then hadn’t caused the issue anymore - or this approach I just found: Theme CSS affecting TinyMCE-editor behavior - #2 by cfx

However, in sage 9.x apparently this isn’t enough, the visual editor still grows.

I could enqueue extra styles only for admin and override the height 100% of html -
but I’d rather like to find a more elegant and simpler workaround instead.

2

In Sage 8 I use body:not#tinymce as my selector and have never had an issue. I haven’t tried it in Sage 9 but it may be worth it for you to try…

1 Like
3

I currently use the following styles:

html,
body:not#tinymce,
.wrap.container,
.content,
.main {
  height: 100%;
}

But this causes the editor to grow with sage 9 based theme.