Expand Signature Pad/Canvas Results in shifted signature cursor placement

App Development
1

Greetings TB Folks-

Wondering if any could help with a slight issue. I followed the instructions in this post: Signature Pad not wide enough to expand the signature pad. All works fine except the placement of the cursor and “line” has shifted due to the increased size of the canvas. I am using width: 99% rather than actual pixels.

.signature-pad canvas {
    width: 99% !important;
}
.signature-pad,.signature-pad-viewer {
    width: 99% !important;
}

signature issue

Does anyone know of a fix?

Thanks,
Adam

2

I believe the Canvas might not be accepting the CSS width properly. Although it looks full, it doesn’t seem to be functioning as expected.

did small fixes might be work for you.

TB.render('YOUR_COMPONET_ID', function(data) {
    const signaturePad = jQuery('.signature-pad');
    signaturePad.width('100%');
    const parentWidth = signaturePad.innerWidth();
    jQuery('.pad').each(function() {
        this.width = parentWidth;
    });
});
2 Likes
3

Christopher-

This is a great attempt. When is removed the recommended CSS from the original post it worked. However, the inner “canvas” was the original size; not the full width of the field/page.

SigPad-No100Percent

Thoughts?

4

@SafetyUniversity
i have checked this again. it’s working for me.
ezgif.com-video-to-gif-converted (1)

5

Hi Christopher-

Thanks for the help, must be something wrong on my end then.

Cheers,
Adam