Summernote not working properly on popup modal

Question

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

<div id="myModal" class="modal fade in" role="dialog">
      <div class="modal-dialog locationMail-dialog">
        <div class="modal-content">
        <input type="hidden" name="email-locationId" id="email-locationId" value="">
        <input type="hidden" name="email-locationKey" id="email-locationKey" value="">
          <div class="modal-header">
            <h4 class="modal-title">Email</h4>
          </div>
          <div class="modal-body">
            <div class="modal-email">
                <label>To :     </label>
                <input type="text" name="email" id="email" value="" class="form-control" readonly>
            </div>
            <div class="modal-email">
                <label>Subject :    </label>
                <input type="text" name="emailsubject" id="emailsubject" value="" class="form-control">
            </div>
            <div class="modal-msg">
              <label>Message : </label>
              <textarea class="form-control summernote" name="emailcontent" id="emailcontent" cols="50" rows="10"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default btn-cancel" data-dismiss="modal">Close</button>
            <img id="modal_loader" src="{{ env('APP_URL') }}/assets/images/ajax-loader.gif" style="display: none;">
            <button type="button" class="btn btn-primary btn-send" data-dismiss="modal">Send</button>
          </div>
        </div>
      </div>
    </div>

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">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
<!-- 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 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="summernote">

        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </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;');
    });
});