Wysiwyg-editor: Cannot set height of editor to 100%

[varmentano]

Use case: Need a way to configure the Froala editor such that it expands to the size of its containing div.

Expected behavior.

There should be some way to make the editor always expand to the height of its containing div. I'd like to set the height to 100%. Ideally this would make the entire editor fit its containing grid, including the toolbar.

Actual behavior.

The documentation indicates only numbers are expected for the "height" option. I can input '100%', this behaves mostly as I'd hope except it leads to 2 new problems:
1) The element with 'fr-element' class does not expand to the size of the element with 'fr-wrapper' class, leading to unexpected blur events when clicking lower into the white-space of the editor.
2) The toolbar is now overflowing.

You can calculate the height of the container div using jQuery or javascript and use that as the passed in height. However this causes problems if your containing div gets resized and again you still have to account for the toolbar size.

Steps to reproduce the problem.

See https://codepen.io/vincentarmentano/pen/xXzmjE
For the blurring problem:
1) Click where the placeholder text is so cursor starts blinking.
2) Click slightly below that but still within the editor window, you'll see a blur event gets triggered.

OS.

Mac OSX 10.11.6

Browser.

Chrome Version 61.0.3163.100

[stefanneculai]

@varmentano the editor height can be set only via the height option.

[samisin]

@varmentano the editor height can be set only via the height option.

That's not really what he said. He asked for the possibility to add support for height 100%. I agree on this. Quite surprised it's not possible and now having to resort to calculating it with JavaScript instead.

[akashnigam010]

Is there a way to give dynamic (%) height instead of just having a fixed one?

[alexsmolin24]

.fr-box {
    display: flex;
    height: 100%;
    flex-direction: column;

    .fr-wrapper {
      flex: 1;

      .fr-element {
        min-height: 100%;
      }
    }
  }

[MadeByDouglas]

this should be a built in option IMO, thanks @alexsmolin24 for the quick fix

[ghost]

The height option accepts calc and a viewport height. Here's an example of how get to 100% height minus 55px:

let editor = new FroalaEditor(
    '#editor', 
    { 
        height: 'calc(100vh - 55px)' 
    }
)