Signature Not working properly in a popup dialog

[Enoch]

Hello,

I'm having an issue with the signature component not working properly when shown in a popup dialog and not using the default 300x150 size. The component's drawing reticle doesn't line up with the actual mouse cursor position, it's skewed quite a bit. The signature component on the index page doesn't have the same issue. I haven't been able to figure out what's causing the issue. Here is a simple reproduction of the issue:



@page "/"
@using Syncfusion.Blazor.Inputs;
@using Syncfusion.Blazor.Popups
@using SyncfusionIssueSample.Client.Shared
@using SyncfusionIssueSample.Shared;


<SfDialog Visible="IsSignaturePopUpVisible" CloseOnEscape="true" IsModal="true" VisibleChanged="EditSignatureVisibilityChanged" ShowCloseIcon="true">
    <DialogTemplates>
        <Header>Edit Signature</Header>
        <Content>
            <EditSignatureDialog />
        </Content>
    </DialogTemplates>
</SfDialog>


<SfSignature style="height: 300px; width: 600px;"></SfSignature>


<SfButton OnClick="ShowDialogClicked">Show Dialog</SfButton>


@code {


    public bool IsSignaturePopUpVisible { get; set; }


    public async Task ShowDialogClicked()
    {
        IsSignaturePopUpVisible = true;
    }


    private async Task EditSignatureVisibilityChanged(bool visible)
    {
        IsSignaturePopUpVisible = visible;
    }
}


EditSignatureDialog component:

@using Syncfusion.Blazor.Inputs


<SfSignature style="height: 300px; width: 600px;"></SfSignature>




@code {


}

I've attached a solution with the minimal reproduction. Thank you!

Attachment: IssueReproduction_4bf7fa7a.zip

[Keerthikaran Venkatachalam]

Hi Enoch,

We have validated your reported query, and it is a known issue on our end. Based on the signature component architecture, the signature canvas element renders based on the parent element dimension. In your shared code snippet, we have observed that the signature canvas initial is hidden and rendered with 0 height and width. So only while drawing the point and canvas dimension have mismatch. To resolve this type of issue, we have two work-around solution.

• Render the signature component after opened the model. Using the Opened and OnClose event of dialog component, we can render the signature as conditional.

<SfDialog Visible="IsSignaturePopUpVisible" CloseOnEscape="true" IsModal="true" VisibleChanged="EditSignatureVisibilityChanged" ShowCloseIcon="true">

    <DialogEvents Opened="SignatureOpenHandler" OnClose="SignatureCloseHandler"></DialogEvents>

    <DialogTemplates>

        <Header>Edit Signature</Header>

        <Content>

            @if (canSignaturePadRender)

            {

                <SfSignature style="height: 300px; width: 600px;"></SfSignature>

            }

        </Content>

    </DialogTemplates>

</SfDialog>

• Using the HtmlAttributes property of signature component, we can set custom height and width directly to canvas element.

<SfSignature HtmlAttributes="@Attr"></SfSignature>

……

    private Dictionary<string, object> Attr = new Dictionary<string, object>()

    {

        { "width", "600" },

        { "height", "300" }

    };

Kindly refer to the attached sample code file and get back to us, if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: Index_cacc701.zip

[Enoch]

Hi KeerthiKaran,

The solutions worked for me. Thank you for the prompt response!

[Keerthikaran Venkatachalam]

You're welcome, Enoch. Get back to us if you need any other assistance.

NOTE: If that post is helpful, please mark it as an answer so that other members can locate it more quickly.