Signature_pad doesn't work when hidden div is shown

Question

I'm trying to implement this signaturePad https://github.com/szimek/signature_pad, and when I tried in a single page it works fine, but the problem comes when I try to put inside a div, which is hidden at the begining, then the pad doesn't work. I think is a canvas problem with the resizing, but I don't know how to solve it.

This is my code:

<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>

and this is the js part:

$(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');
    });
});

I loaded all the js and css required and it is working in the main view, but not when I go through a button and change the div to block. I tried to read the documentation, but is not very clear.

Answer 1

Use: height: 0; overflow: hidden; instead of: display:none

It works for me.

Answer 2

CSS manipulations didn't work for me. Instead of playing with CSS, I didn't render the signature pad until the user was ready to sign. I.e. wrap the signature pad component with the condition that listens to some event.

Answer 3

Can you try setting visiblity hidden instead of display:none ?

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