当隐藏的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'); 
    }); 
});