Signature Pad not wide enough

App Development
1

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…

2

Any idea @tim.young?

3

Credit to @Chem

CSS

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

JavaScript

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();
            $('.signclear').click();
        }
        resizeCanvas();
    })();
});

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

screenshot-build.tadabase.io-2021.01.06-22_49_06

1 Like
4

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…

5

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.

6

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

7

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

<script>
// JavaScript code goes here
</script>