Signature not visible

[Kekwel]

Describe the bug
I already comment on the vaadin directory but I think it's better to put it there.
The Lit-Element is there (see the attachment) but it doesn't appear on screen.

To Reproduce

• Last version of vaadin (14.6.5) and Signature widget (2.0.0)
• Create a view (extends FlexLayout) with Signature element in it

private SignaturePad signature = new SignaturePad();
private void initSignature() {
    // ....
    signature.setHeight("150px");
    signature.setWidth("300px");
    add(signature);
}

Expected behavior
The signature component should be visible and usable

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser : Chromium, I tried with Firefox also
• Version : Chromium 91.0.4472.164, Firefox 78.12.0esr

Additional context
If you need anything else, I can provide it

[F0rce]

@Kekwel Sorry for the late answer, I was working on other projects.

I'm not able to reproduce your issue on vaadin version 14.6.5 and on 14.6.8. I created the view how you told me to do.

Could you try to give me some more additional context, that I can help you resolving this issue ?

Have a great day,
David

[F0rce]

Closed due to inactivity. If you need further assistance, please re-open this issue.

[Kekwel]

Hello, sorry about the late response, I wasn't available.

I also tried with blank project and it works perfectly.

For my project, I used a vaadin-blank template that a colleague created which contains some views and configuration specific to our company.
I tried to create the same view in both project, with just the signature pad in a VerticalLayout, and I can't find any differences between those two projects :

        SignaturePad signature = new SignaturePad();
        signature.setHeight("150px");
        signature.setWidth("300px");
        signature.setBackgroundColor(0, 0, 0, 0);
        signature.setPenColor("#000000");
        
        add(signature);

Result:

In my case, the html tag <lit-signature-pad> is there, but the canvas inside the shadow-root isn't there or generated.

Do you know why the inside canvas isn't generated ? Can it be a lead ?

PS: I can't re-open the issue

[F0rce]

Hi @Kekwel,

I really don't know what could be forcing the non showing/rendering of the lit-element.

Could you please attach an screenshot of the mozilla (or chrome depends on which browser you are using) site investigator, to maybe see if css is hiding something. I really can't think of anything else.

In the best case, this what you should be looking at.

Important is that the width/height of the lit-signature-pad and the width/height of the canvas itself should be close to be the same.

[Kekwel]

Hi @F0rce ! Thanks for your answer.

Here's the screenshot :

Don't see any CSS hiding, there isn't the canvas element between <!----> , here's also the css on the lit element :

It must be something from the blank project I used. a dependency excluded maybe, is it possible ?

[F0rce]

@Kekwel could be possible.

Could you please re-check if those two codeblocks are persistant in your pom:

<dependency>
   <groupId>de.f0rce.signaturepad</groupId>
   <artifactId>signature-widget</artifactId>
   <version>2.0.0</version>
</dependency>

<repository>
   <id>vaadin-addons</id>
   <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

Maybe also try to rebuild the project by using mvn clean install:

If nothing helps, I guess you have to contact Vaadin Live Support. Maybe it is something else, we both don't think off.

[Kekwel]

Those two codeblocks are there.

I also rebuild the project but it's the same.

I'll try to reach them. Thanks for your answer and your time !

[dmarko484]

I know this thread is a bit old but I have the same issue right now. @Kekwel did you resolve this issue in your app? How? I have this lit-signature-pad available in html but nothing on the screen. Vaadin 22.0.x and SignaturePad 2.0.2 on my end ...

Here is what I can see in browser ...

<div><h2>Signature pad</h2>
<div style="border: 1px solid red;">
<lit-signature-pad style="width: 300px; height: 300px;"></lit-signature-pad>
</div>
</div>

[Kekwel]

Hi @dmarko484,
Yes indeed I resolved it but forgot about this issue.

The only thing I did was to whitelist the addon, in my yml conf file :

vaadin:
    whitelisted-packages: de/f0rce/signaturepad

cf https://vaadin.com/docs/v14/flow/integrations/spring/tutorial-spring-configuration#special-configuration-parameters

It worked for Vaadin 14 but don't know if it's the same case for newer version
EDIT : looks like it's the same : https://vaadin.com/docs/v22/flow/integrations/spring/configuration/#special-configuration-parameters

[dmarko484]

Thanks a lot! It worked the same way for Vaadin 22