Signature-pad in stepper in dialog - Vuetify

[RemonVanNieuwenhuizen]

I read a lot about the issue with signature-pad within a dialog in vuetify.
But when I try to apply it to my situation it doesn't seem to work.

I've got my signature pad in a component then in a stepper form and then in a dialog.
What I tried was triggering a event when the stepper form changes to the signature pad.

When I got this working, console.log(this) gave me the current environment and I found the signature pad in refs and there the canvasresize() function.

The result for in my vue dialog (where the event takes place) was:
this.$children[0].$children[0].$children[3].$children[13].$children[0].$children[0].resizeCanvas()

This doesn't work. It seems to trigger the function but the signature pad doesn't appear.
Any other workarounds for me? Sorry but sadly I don't know how to make a snippet of this.

BTW: it does appear when I resize the window.

[alexsante]

I ran into the same issue with a modal and had to trigger the resizeCavas() after a very short delay (250ms).

    displaySignatureModal() {
      this.modals.signature = true
      setTimeout( () => {
        this.$refs.signaturePad.resizeCanvas()
      }, 250) 
    }

I hope this helps.

[elik56a]

@alexsante thank you!! help me a lot!!

[RemonVanNieuwenhuizen]

@alexsante Thanks for the solution! I found another one you can try, without the delay.

this.$children[0].$children[0].$children[3].$children[13].$children[0].$refs.signaturePad.$refs.signaturePadCanvas.height = 500 this.$children[0].$children[0].$children[3].$children[13].$children[0].$refs.signaturePad.$refs.signaturePadCanvas.width = 500

Just setting the height and width of the underlaying canvas also worked for me.

[neighborhood999]

If have any problem feel free to reopen the issue.