Signature_pad не работает, когда отображается скрытый div

Question

Я пытаюсь реализовать эту подписьPad https://github.com/szimek/signature_pad, и когда я попытался на одной странице, он отлично работает, но проблема возникает, когда я пытаюсь поместить внутри div, что скрытый в начале, тогда панель не работает. Я думаю, что проблема с холстом с изменением размера, но я не знаю, как ее решить.

Это мой код:

<div class="col-sm-9 col-md-10 message-list"> 
    This is the first div, which I hidde when click on a row 
</div> 
<div class="col-sm-9 col-md-10 view-message" style="display:none" > 
<div id="signature-pad" class="m-signature-pad"> 
    <div class="m-signature-pad--body"> 
     <canvas></canvas> 
    </div> 
    <div class="m-signature-pad--footer"> 
     <div class="description">Sign above</div> 
      <button type="button" class="button clear sign_btn" data-action="clear">Clear</button> 
      <button type="button" class="button save sign_btn" data-action="save">Save</button> 
    </div> 
</div> 

и это JS часть:

$(document).ready(function() { 
$(".list-group-item").each(function() { 
    $(this).click(function() { 
      $(".message-list").fadeOut('slow').css('display','none'); 
      $(".view-message").fadeIn('slow').css('display','block'); 
    }); 
}); 

Я загрузил все JS и CSS требуется, и он работает в главном окне , но не тогда, когда я перехожу через кнопку и меняю div на блокировку. Я попытался прочитать документацию, но не очень ясен.

Answer 1

Использование: height: 0; overflow: hidden; вместо: display:none

Это работает для меня.

Answer 2

Можете ли вы попытаться установить видимость скрытой вместо display:none?

$(".list-group-item").each(function() { 
    $(this).click(function() { 
      $(".message-list").fadeOut('slow').css('visibility','hidden'); 
      $(".view-message").fadeIn('slow').css('visibility','visible'); 
    }); 
});