SfSignature does not allow to sign if opened inside a modal SfDialog

[Ben Junior]

Please, look in the attached project, the SfSignature works fine in the page but if it is opened inside a modal SfDialog  it does not allow to sign.

Attachment: RPTest_SignatureModal_fa18b593.zip

[YuvanShankar Arunagiri]

Hi Ben,

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="@visible" Width="100%" Height="100%" ShowCloseIcon="true" IsModal="true" AllowDragging="true" EnableResize="true">

    <DialogEvents OnOpen="OnOpenDlg" Opened="OnOpenedDlg" Closed="OnClosedDlg" />

    <DialogTemplates>

        <Header>Primary Renter Signature</Header>

        <Content>

            <div class="control-section">

                    @if(popupOpen)

                    {

                        <div id="signature-control">

                            <div class='e-sign-heading'>

                                <span id="signdescription">Sign below</span>

                                <span class="e-btn-options" style="margin-top:30px;">

                                    <SfButton OnClick="@(() => visible = popupOpen = false)" CssClass="mr-4">Close modal window </SfButton>

                                    <SfButton @ref="saveButton" Disabled="saveDisabled" IsPrimary="true" class="e-sign-save" @onclick="onSave">Save</SfButton>

                                    <SfButton @ref="clearButton" Disabled="clearDisabled" IsPrimary="true" class="e-sign-clear" @onclick="onClear">Clear</SfButton>

                                </span>

                            </div>

                            <SfSignature @ref="signature" Changed="OnChange" style="height:100%; width: 100%;"></SfSignature>

                        </div>

                    }

            </div>

        </Content>

    </DialogTemplates>

</SfDialog>

………

void OnOpenedDlg(Syncfusion.Blazor.Popups.OpenEventArgs args)

    {

        popupOpen = true;

    }

 

    void OnClosedDlg()

    {

        visible = false;

        popupOpen = false;

    }

Check with attached sample code file and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: Index_63bb7ef.zip