title: Summer Note Issue in Bootstrap modal
body: <p>I am using the Summernote Text plugin inside my project. But it seems to be not working properly. The editable  inside the Summernote doesn't show any text which I am typing. It only shows text when I resize the window in the browser.
  I am including the code below; I hope it helps.</p>
  
  <pre><code> &lt;%-- Rendering modal--%&gt;
  &lt;div id="TCModal" class="modal animated fadeIn" role="dialog"&gt;
     &lt;div class="modal-dialog modal-dialog-w-lg"&gt;
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
           &lt;div class="modal-header"&gt;
              &lt;button type="button" class="close text-inverse" style="opacity: .5" data-dismiss="modal" aria-hidden="true"&gt;&lt;i class="ion-close-circled"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Type Your Terms &amp; Conditions &amp;nbsp;&lt;/h4&gt;
           &lt;/div&gt;
           &lt;div class=""&gt;
              &lt;div style="max-height: 500px" id="summernoteTermsAndCondition"&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>And the initialization for summer note is</strong> </p>
  
  <pre><code> $('#summernoteTermsAndCondition').summernote({
              placeholder: '',
              height: 200,
              popover: {
                  air: [
                    ['color', ['color']],
                    ['font', ['bold', 'underline', 'clear']]
                  ]
              }
          });
  </code></pre>