Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Codemirror content not visible in bootstrap modal until it is clicked

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 ?

like image 373
Parin Porecha Avatar asked Jun 13 '13 11:06

Parin Porecha


2 Answers

A cleaner solution perhaps?

Bootstrap modals have an event that fires after the modal is shown. In Bootstrap 3, this is shown.bs.modal.

modal.on('shown.bs.modal', function() {
    // initialize codemirror here
});
like image 195
ncabral Avatar answered Oct 22 '22 08:10

ncabral


You can now use the Code Mirror addon Auto Refresh: https://codemirror.net/doc/manual.html#addon_autorefresh

Just include the script dependency

<script src="../display/autorefresh.js" %}"></script>
Which now gives you the option "autoRefresh" to auto refresh just once right after displaying the content.
var myCodeMirror = CodeMirror.fromTextArea(myTextArea,{
  autoRefresh: true,
});

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.

like image 38
Josh Avatar answered Oct 22 '22 08:10

Josh