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