title: Summernote not working properly on popup modal
body: <p>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 </p>
  
  <pre><code>$(".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;');
              });
  </code></pre>
  
  <p>And HTML code is </p>
  
  <pre><code>&lt;div id="myModal" class="modal fade in" role="dialog"&gt;
        &lt;div class="modal-dialog locationMail-dialog"&gt;
          &lt;div class="modal-content"&gt;
          &lt;input type="hidden" name="email-locationId" id="email-locationId" value=""&gt;
          &lt;input type="hidden" name="email-locationKey" id="email-locationKey" value=""&gt;
            &lt;div class="modal-header"&gt;
              &lt;h4 class="modal-title"&gt;Email&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
              &lt;div class="modal-email"&gt;
                  &lt;label&gt;To :     &lt;/label&gt;
                  &lt;input type="text" name="email" id="email" value="" class="form-control" readonly&gt;
              &lt;/div&gt;
              &lt;div class="modal-email"&gt;
                  &lt;label&gt;Subject :    &lt;/label&gt;
                  &lt;input type="text" name="emailsubject" id="emailsubject" value="" class="form-control"&gt;
              &lt;/div&gt;
              &lt;div class="modal-msg"&gt;
                &lt;label&gt;Message : &lt;/label&gt;
                &lt;textarea class="form-control summernote" name="emailcontent" id="emailcontent" cols="50" rows="10"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button type="button" class="btn btn-default btn-cancel" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;img id="modal_loader" src="{{ env('APP_URL') }}/assets/images/ajax-loader.gif" style="display: none;"&gt;
              &lt;button type="button" class="btn btn-primary btn-send" data-dismiss="modal"&gt;Send&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>