Summernote not working properly on popup modal

I am using summernote.js for html editor in bootrap modal popup. the Editable are in the editor not working by default. But it becoming working when when browser screen is resized or inspect element dev tool is opened . Any idea how to fix this

$(".summernote").summernote({
height: 150,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul','ol','paragraph']],
["view", ["fullscreen", "codeview"]]
],
});

$('i.note-recent-color').each(function(){
$(this).attr('style','background-color: transparent;');
});


And HTML code is







Email

To :

Subject :

Message :

</div>

Close

Send

</div>
</div>
</div>

Could you please provide the HTML code as well?
– Ravi Maniyar
2 days ago

please check the question now @RaviManiyar
– user
2 days ago

Could you check my answer please? Let me know if it works. I have created a fiddle.
– Ravi Maniyar
2 days ago

Yes, but now not working in my case ,, i am using summernote-bs4.js
– user
2 days ago

I've edited my fiddle to use summernot-bs4.js and it still works fine. Here: jsfiddle.net/q7khtspn/4
– Ravi Maniyar
2 days ago

1 Answer
1

I have created a quick fiddle for you.

HTML:

<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js
<!-- Button trigger modal -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>

<!-- Modal -->








×

Modal title

</div>

Close
Save changes

</div>
</div>
</div>

jQuery:

jQuery(document).ready(function(e) {
jQuery(".summernote").summernote({
height: 150,
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul','ol','paragraph']],
["view", ["fullscreen", "codeview"]]
],
});

jQuery('i.note-recent-color').each(function(){
jQuery(this).attr('style','background-color: transparent;');
});
});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.