@ciar4n if you can do the same for tinymce, I'll write a small snippet that will synchronise the value with the iframe...

@dgt41 Certainly worth considering. TinyMCE currently has quite a large height which in most cases extends beyond the viewport. Applying this change to it will effectively reduce its height in most cases.

To demonstrate how this change effects the CodeMirror editor ....

Some might consider this an improvement with TinyMCE, others may not? Potentially this change allows the use of only one scroll bar rather than 2 when navigating to the end of a document.

Some might consider this an improvement with TinyMCE, others may not

Actually this WAS a todo task for J4 in JAB2015, so most probably is the right way to go...

so most probably is the right way to go...

Yes, calc() will work on IE9+ and all other browsers too

• IE8 will discard it, and just use the existing min-height value

calc() was used for site title of protostar too:
#13064

Finally lets start to making more use of it

A note about this PR,

• the purpose is to the editor to have a height that matches the available viewport while being 400px smaller than it

Of course if the editor is at the bottom of some page, you will need to scroll the window to reveal of the editor
I just mention this case because it is not what the above animation shows

Continuing the above, i think it is preferable to use
height: calc(100vh - 330px);
or
height: calc(100vh - 240px);

so that we can get some real benefit in x768 and in x800 laptop screens
since: height: calc(100vh - 300px);
in those screens will give almost zero benefit because:
708 - 400 = 308 (on x768 screen)
740 - 400 = 340 (on x800 screen)

The user may need to scroll to put the editor inside viewport, if we use:
height: calc(100vh - 240px);
but anyway, if you place the editor at the bottom of page, you already need to scroll

and to avoid scroll in cases editor is near the top of the page:
height: calc(100vh - 330px);
is a good trade-off

@ggppdk The reasoning behind using 400 is that that is the approx height (plus a few px) from the top of the viewport to where the editor starts (inc. 'saved' alert).

To avoid double scroll bars on bigger screens and still allow a benefit to smaller screens I would suggest increasing the min-height rather than decreasing the calc value.

The reasoning behind using 400 is that that is the approx height (plus a few px) from the top of the viewport to where the editor starts (inc. 'saved' alert).

hhmm, the saved alert can be dismissed,
so still thinking that height: calc(100vh - 330px); may be a better trade-off

I have tested this item ✅ successfully on 67c0efc

@ggppdk I can set to 330px however it would mean the appending buttons would appear below the fold. Personally I would sooner these buttons to be visible if the screen height allows it..

Ok, this is only a common screen, the backend article edit screen,

But if the editor is shown at the middle or bottom of the page,
-- not only the buttons, but the editor itself will not be visible without doing some scrolling

That is even if using the minimum 300px,
-- the user will still need to scroll in order to put it (=the editor) inside the view port

But as i said i understand that you want to catch the common case of most backend screens,
that the editor is near the top and indeed -400px makes it show in full

@ggppdk Min-height has been increased to 400px. I feel we are over complicating a relatively simple PR. As this PR only effects Isis, the editor will never appear closer to the top of the screen, nor will this PR effect the frontend. The value has been set to accommodate the majority of instances of the editor within the viewport. If the editor is further down the page then there is an argument for reducing the height further rather than increasing it. Considering this I set a max-height.

@dgt41 I will leave TinyMCE for another PR as I am not sure how the JS will effect the option to resize.

I have tested this item ✅ successfully on 7f19f96

I have tested this item ✅ successfully on 7f19f96

Great ?

Great. RTC now.