Impossible to sign when the component is in a hide/show section

[Julien Barach]

Hi,

I want to conditionally hide/show a DOM element that includes a SfSignature component but this one has the attributes height and width to 0 so I can't sign.

I've read other posts about that and I understand why it has 0 height and width, because it is initially hidden.

But we should have a method to "refresh" the component so that it can resize to its parent when it is needed.

Is there a way to make it working in this case ?

Please see the attached sample.

Julien

Attachment: Signature_22458c9e.zip

[Keerthikaran Venkatachalam]

Hi Julien,

We have prepared sample based on requirement. Please refer to the below code snippet and sample.

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Inputs

<SfButton id="open" CssClass="e-primary" @onclick="OnOpen">Show/Hide Signature</SfButton>

@if (show) {

<SfSignature></SfSignature>

}

@code {

    private bool show = false;

    private void OnOpen()

    {

        show = !show;

        StateHasChanged();

    }

}

Sample Link: https://blazorplayground.syncfusion.com/hZVAZYZMoknUiatz

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

Regards,

KeerthiKaran K V

[Julien Barach]

Hi,

Nope this solution doesn't work as it loses the signature if you sign > close > open.

[Keerthikaran Venkatachalam]

Hi Julien,

We have checked the reported query, and you can hide and show the signature component using a separate button. Please refer to the below code snippet and sample.

@using Syncfusion.Blazor.Buttons

@using Syncfusion.Blazor.Inputs

<SfButton id="open" CssClass="e-primary" @onclick="OnOpen">Show Signature</SfButton>

<SfButton id="open" CssClass="e-primary" @onclick="Open">Hide Signature</SfButton>

@if (show) {

<SfSignature @ref="Signature" style="@cssClass"></SfSignature>

}

 

@code {

    private bool show = false;

    SfSignature Signature;

    string cssClass = "";

    private void OnOpen()

    {

        show = true;

        cssClass = "display: block";

    }

    private void Open()

    {

        cssClass = "display: none";

    }

}

Sample Link: https://blazorplayground.syncfusion.com/rjBKtuNpxLyVkHSz

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

[Julien Barach]

Hi,

Thanks for your reply.

So we need to maintain two parameters to make it work ? a bool switching one time to true + string containing styles.

My real-world use-case is more like this and is pretty straightforward :

https://blazorplayground.syncfusion.com/rXVqjODzmpLqhMyz

Could you explain why it's not working ? It's common and simpler to just display the parent element by conditioning it's css class or style.

At least it could be a refresh method on the SfSignature reference to make it adapt to its parent.

Because your solution cannot be easily found and is not convenient.

Regards

[Keerthikaran Venkatachalam]

Hi Julien,

We calculated the signature height and width based on the parent element, but the parent element was hidden, so only the height and width were zero.

We have confirmed the issue as “Hiding the Signature component canvas width and height was Zero" and logged a defect report. We will include the fix for this issue in upcoming weekly patch release scheduled for September 27, 2023.

Feedback link: https://www.syncfusion.com/feedback/46660/hiding-the-signature-component-canvas-width-and-height-was-0

You will be informed regarding this once the fix is published.

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

[Keerthikaran Venkatachalam]

Hi Julien,

We are glad to announce that our weekly patch release (23.1.38) has been rolled out. We have included the fix for this “Hiding the Signature component canvas width and height was Zero” issue in this release. So, we suggest you upgrade our Syncfusion packages to our latest version to resolve this issue on your end (23.1.38).

Sample link: https://blazorplayground.syncfusion.com/hjrKjaVFsbilAjNy 

Package link: https://www.nuget.org/packages/Syncfusion.Blazor.Inputs 

We have provided the RefreshAsync method to resolve the dimension resizing issue. If you didn't set the height and width to signature, then it will render with the default canvas height and width (300 * 150), and there is no need to use the refresh method in this case. If you want to customize the signature canvas dimension, then you need to set the height and width of the signature canvas and use the refresh method.

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