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

Question

我正在嘗試實現這個 signaturePad https://github.com/szimek/signature_pad ，當我在單個頁面中嘗試時它工作正常，但是當我嘗試放入隱藏在開始，然后墊不起作用。 我認為是調整大小的畫布問題，但我不知道如何解決。

這是我的代碼：

<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; height: 0; overflow: hidden; 而不是： display:none

這個對我有用。

Answer 2

您可以嘗試將可見性設置為 hidden 而不是display:none嗎？

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

Answer 3

CSS 操作對我不起作用。 在用戶准備簽名之前，我沒有渲染簽名板，而不是使用 CSS。 即用監聽某個事件的條件包裝簽名板組件。