I am using codemirror 3 with bootstrap.
In my bootstrap modal, there is a textarea, and i am replacing it with codemirror.
I am using task_name_editor.setValue('initial value')
to initialise codemirror with an input.
The problem is that the content is there, but it is not visible until it is clicked or any key is pressed while it is focused.
I tried Marijn's answer to a similar question, but i don't know where to place task_name_editor.refresh()
I tried placing it where i show the modal -
$('#edit_task_modal').modal('show');
task_name_editor.setValue('initial value');
task_name_editor.refresh();
even then, it is not working Please can anyone show how to fix this problem ?
(angular,bootstrap) I just solved it with a simple timeout, like this:
and then in my controller:
to avoid getting refreshed every time (meaning position and changes lost) i strongly advise for using like this:
Its under MIT license because i am such a nice person
A cleaner solution perhaps?
Bootstrap modals have an event that fires after the modal is shown. In Bootstrap 3, this is
shown.bs.modal
.If you initialize editor on modal shown event, problem will be solved. Just put this script on parent page.
You can now use the Code Mirror addon Auto Refresh: https://codemirror.net/doc/manual.html#addon_autorefresh
Just include the script dependency
The docs also state its a 250ms time delay after showing the hidden content. You can increase that delay if you are loading a lot of content.
With help from this question, I was able to get a CodeMirror editor, which was sitting in an inactive bootstrap 3 tab and therefore not completely initialized, and refresh it when the tab is clicked. Maybe someone finds it useful.
Coffeescript version: