jodit editor not displayed correctly

I have a problem with the jodit wysiwyg editor (or possibly any other type of plugin editor) working within a Bootstrap tab. If I add an editor to the tab content then when the user selects that tab the content is not displayed correctly (it is only a fraction of the height and is missing a lot of it's toolbar).

I suspect it is being rendered within the hidden tab div which possibly affects the redraw process?

Here is a working fiddle Click on the Editor tab to see the reduced size editor. To see the proper working version, grab the small resizer in the bottom right and drag the area, it should auto resize to the correct display.

To render the editor the only code I've used is

var editor = new Jodit('#editor', {
  autofocus: true,
  height: "600"
});

I've also tried running the editor.resize() function after it's been created which doesn't work.

The tabs and the content are generated dynamically. Is there some other editor function that I can call after the content has been applied that will fix the redraw?

Solution

It turns out that there is an option called toolbarAdaptive that turns off adaptive mode. This allows the tool to be drawn as expected. Not sure if that is a bug in the Jodit editor itself or desired functionality.

var editor = new Jodit('#editor', {
  autofocus: true,
  height: "600",
  toolbarAdaptive: false
});