Expand Signature Pad/Canvas Results in shifted signature cursor placement

[SafetyUniversity]

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;
} 

Does anyone know of a fix?

Thanks,
Adam

[christopher93]

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;
    });
});

[SafetyUniversity]

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.

Thoughts?

[christopher93]

@SafetyUniversity
i have checked this again. it’s working for me.

[SafetyUniversity]

Hi Christopher-

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

Cheers,
Adam

[SafetyUniversity]

Greetings TB Community-

With the help of Kevin Ruiz (@kruizf201) the following code will expand the signature canvas to 100% of the window width. Note there are two different pieces of code - one for add form and one for edit form.

ADD FORM:
CSS

.parent-container {
    width: 100%;
}

.ctrl-sign {
    width: 100%;
}

.signature-pad {
    width: 100%;
    position: relative;
}

.signature-pad canvas {
    width: 100% !important;
    height: auto;
}

JAVASCRIPT (Change to your component number that holds the signature field)

TB.render('component_X', function(data) {
    
    // Set the width of the container and canvas to 100%
    $('.ctrl-sign').css('width', '100%');
    $('.signature-pad').css('width', '100%');
    $('.pad').css('width', '100%');
    
    // Maintain aspect ratio of canvas
    var canvas = $('.pad')[0];
    var context = canvas.getContext('2d');
    var originalWidth = canvas.width;
    var originalHeight = canvas.height;
    
    function resizeCanvas() {
        var newWidth = $('.signature-pad').width();
        // var newHeight = (originalHeight / originalWidth) * newWidth;
        canvas.width = newWidth;
        canvas.height = 120;
    }
    
    $(window).resize(resizeCanvas);
    resizeCanvas(); // Initial resize
    
});

EDIT FORM:
CSS

.signature-pad-viewer {
    width: 100%;
    text-align: center;
}

.parent-container {
    width: 100%;
}

.ctrl-sign {
    width: 100%;
}

.signature-pad {
    width: 100%;
    position: relative;
}

.signature-pad canvas {
    width: 100% !important;
    height: auto;
}

JAVASCRIPT (Change to your component number that holds the signature field AND change to your field ID/number of the signature field - you can find the field ID in the Data Builder)

TB.render('component_X', function(data) {

    $("#field_block_field_XXXX > div > div.t-form-signature > ctrl-sign > div > div > button").on("click", function(){
        
        $('.ctrl-sign').css('width', '100%');
        $('.signature-pad').css('width', '100%');
        $('.pad').css('width', '100%');

        var canvas = $('.pad')[0];
        var context = canvas.getContext('2d');
        var originalWidth = canvas.width;
        var originalHeight = canvas.height;
        
        function resizeCanvas() {
            var newWidth = $('.signature-pad').width();
            // var newHeight = (originalHeight / originalWidth) * newWidth;
            canvas.width = newWidth;
            canvas.height = 120;
        }
        
        $(window).resize(resizeCanvas);
        resizeCanvas(); // Initial resize

    });
    
});

Hope this helps,
Adam