How to set froala to calc height using css

Question

I have the following CSS which I use to set the height of CodeMirror which works well across browsers :

.CodeMirror {
    /* Firefox */
    height: -moz-calc(100vh - 190px);
    /* WebKit */
    height: -webkit-calc(100vh - 190px);
    /* Opera */
    height: -o-calc(100vh - 190px);
    /* Standard */
    height: calc(100vh - 190px);
}

Now, I am moving to froala which appears to be the only WYSIWYG editor that supports CodeMirror as the 'view code' portion.

I have no problem embedding and setting up CodeMirror to work with this, and the style that I applied works with the embedded CodeMirror, however I am unable to apply the Height to the requisite CSS file in the manner I have done with CodeMirrors CSS file.

There are height, heightMax, heightMin, and fullPage properties for froala which can be set during JavaScript initialization, however this does not support calculated values.

Before using CSS's calc() method, I was using JavaScript to size CodeMirror with mixed results, and a lot of extra checks in place which was much more "jumpy" and often either going out of bounds (box going beyond the containing elements height), or falling just short (leaving a gap between the editor element and the containing elements height).

What I would like to do, is override the containing elements height via CSS (I don't mind editing the froala_editor.css file (or other files directly part of the project) to do this. To figure this out for CodeMirror took a rather long time to find the ONE spot where the height calc css would go into the .CodeMirror block. With froala, I do not know where or what the equivalent is called to size the editable area.

I have tried placing the size code in several places including .fr-box.fr-basic .fr-element, to no avail.

Answer 1

The height parameter of froala accepts valid CSS values like 100px, 100, or 100%. As a result, you can use browser detection to fairly effectively decide which value to set.

Following is one example on how this can be done, while still maintaining the calc method in CSS without the need to modify any of froala's CSS files :

// set the default calc value
var codeHeight = 'calc(100vh - 96px)';

// prepend any browser engine specific names if needed
if((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1 ) {
    codeHeight = '-o-' + codeHeight;
} else if(navigator.userAgent.indexOf("Chrome") != -1 ) {
    codeHeight = '-webkit-' + codeHeight;
} else if(navigator.userAgent.indexOf("Safari") != -1) {
    codeHeight = '-webkit-' + codeHeight;
} else if(navigator.userAgent.indexOf("Firefox") != -1 ) {
    codeHeight = '-moz-' + codeHeight;
}

// Initialize froala using calc for height
$('.code').froalaEditor({
  height: codeHeight
});

While the above is a hackish way to accomplish this, there are other browser detection methods which could be applied. This just demonstrates how this can be done as elegantly as possible without touching any of froala's sources.

In summary, this works as follows :

• Detect the browser (above case uses JavaScript and UserAgent)
• Set an accessible variable to the detected browser supported calc CSS method
• Pass the accessible variable to froala's height init parameter.