Signature Pad not wide enough

How do I make the size of the signature pad to go bigger and wider?
I was able to try to make it wider but the area to write the signature was the same so I just put it back. Anyone knows how to widen the area not just the shape?signature-pad

By the way, the div works well only on the form-control and buttons but doesn’t seem to have any effect on the signature field…

Any idea @tim.young?

Credit to @Chem


.signature-pad canvas {


TB.render('component_3', function(data) {    
    (function() {
        var canvas = $('canvas')[0], context = canvas.getContext('2d');
        window.addEventListener('resize', resizeCanvas, false);
        function resizeCanvas() {
            canvas.width = $('.signature-pad').width();
            canvas.height = $('.signature-pad').height();

Please remember to change ‘component_3’ to match your form component #

1 Like

Thanks @tim.young just like CSS stylesheet.css that can be added in the Custom Header/Footer, can we we that on JavaScript so that later if we want to add more and more javas I just need to update the docs like the stylesheet.css for CSS?

does that make sense? anyone can answer…

I’m not sure I understand the question completely but the CSS and JS for the signature pad can go on the page itself, unless you need this customization globally.

Yeah globally so that all signature pad functions and behave the same way

You can add JavaScript code to the Custom Footer setting but you’ll need to wrap the code in a script tag like this.

// JavaScript code goes here