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

Я пытаюсь реализовать этот signalPad 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>

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

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


javascript html type-signature
person CapAm    schedule 13.02.2016    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Используйте: height: 0; overflow: hidden; вместо: display:none

Меня устраивает.

person Duy Hoang    schedule 21.03.2016

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

Манипуляции с CSS мне не помогли. Вместо того, чтобы играть с CSS, я не отображал панель для подписи, пока пользователь не был готов подписать. т.е. оберните компонент панели подписи условием, которое прослушивает какое-то событие.

person Sofia H.    schedule 16.03.2021