placing a signature control in a SfDialog and running into a number of issues
sometimes on the first popup of the dialog the signature control seems to not get activated properly
if i just have a signature control at this time it has no size. if i force the size via CSS it does the following
when i try to draw i get the following error
Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
at e.updateSnapCollection (https://localhost:44336/_content/Syncfusion.Blazor.Inputs/scripts/sf-signature.min.js?v=20.3.57:1:10453)
at e.mouseUpHandler (https://localhost:44336/_content/Syncfusion.Blazor.Inputs/scripts/sf-signature.
then when i close and reopen the dialog i get the following error
Uncaught TypeError: Cannot read properties of null (reading 'length')
at e.endDraw (sf-signature.min.js?v=20.3.57:1:7490)
at e.mouseUpHandler (sf-signature.min.js?v=20.3.57:1:3648)
but now the signature control works
the error above is now shown on any page load even if there is no signature control on that page so something stays left behind
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 Height="75%" Width="435px" Target="#target" ShowCloseIcon="true" @bind-Visible="Visibility">
<DialogEvents Opened="@OnOpenHandler" Closed="@DialogClosed"></DialogEvents>
private void OnOpenHandler(Syncfusion.Blazor.Popups.OpenEventArgs args)
this.ShowButton = false;
isOpen = true;
private void DialogClosed(CloseEventArgs args)
this.ShowButton = true;
isOpen = false;
Could you please check with attached sample and get back to us, if you need any further assistance on this.