當隱藏的div顯示時，Signature_pad不起作用

Question

我試圖實現這個signaturePad 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

你可以嘗試設置visiblity隱藏而不是display:none？

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