We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Signature not working in modal

When I generate a modal popup with the signature control. It does not allow me to sign. Is this a recurring problem


3 Replies

YA YuvanShankar Arunagiri Syncfusion Team December 13, 2022 10:12 AM UTC

Hi Farai,


We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet. The signature pad render depends on parent div element height and width. Initially, the dialog component height and width were 0. So, only signature pad render with 0 height and width. To resolve this issue, render the signature pad in Opened event of the dialog component.

<SfDialog @bind-Visible=IsPopupVisible

                               IsModal=true

                               ShowCloseIcon=true

                               CloseOnEscape=true

                               CssClass="signature-modal">

              <DialogEvents Opened="@OnOpenHandler" Closed="@OnCloseHandler"></DialogEvents>

              <DialogTemplates>

                             <Header>

                                           <span class="sub-title">Signature</span>

                                           @*<span class="sub-title">@Localizer[TextItem.Signature.ToString()]</span>*@

                             </Header>

                             <Content>

                                              @if (isOpen) {

                                                             <SignatureComponent IsSignature=@true IsNext="@IsNext" />

                                              }

                             </Content>

              </DialogTemplates>

 

‘’’’’’’’’’’’’’

public void OnOpenHandler(Syncfusion.Blazor.Popups.OpenEventArgs args)

    {

        isOpen = true;

    }

 

              public void OnCloseHandler(Syncfusion.Blazor.Popups.CloseEventArgs args)

    {

        isOpen = false;

    }


Could you please check the above code and get back to us, if you need any further assistance on this. 


Regards,

YuvanShankar A


Attachment: BlazorApp1SignatureModalDemo_aab829b1.zip


FA Farai February 13, 2023 08:10 AM UTC

Can I please have a solution using Javascript (ES5)?



YA YuvanShankar Arunagiri Syncfusion Team February 13, 2023 10:16 AM UTC

Hi Farai,


We have prepared the sample based on your requirement. Using open event of dialog component, we can initialize the signature component shown as below.


var dialogObj = new ej.popups.Dialog({

    header: headerImg + '<div id="dlg-template" title="Nancy" class="e-icon-settings"> Nancy </div>',

    content: ' <canvas id="signature" style="height: 90%; width: 100%;"></canvas>',

    showCloseIcon: true,

    target: document.getElementById('target'),

    width: '435px',

    open: dialogOpen,

    close: dialogClose,

    height: '76%',

});

dialogObj.appendTo('#template'); 

……………………

function dialogOpen() {

    var signature = new ej.inputs.Signature({}, '#signature');

    document.getElementById('targetButton').style.display = 'none';

}


Sample link: https://stackblitz.com/edit/7usblx?file=index.js


Get back to us if you need any further assistance on this. 


Regards,

YuvanShankar A


Loader.
Live Chat Icon For mobile
Up arrow icon