Jsignature doesn't load properly

[sameermotwani]

Hi, I tried using the library and it doesn't load properly in the beginning and when I resize my window, it seems to resize and work properly.

Here is the snippet of my code

INITIALLY its smaller and cant draw:

FINAL after window resize it works:

[sameermotwani]

$(document).ready(function () { $("#signature").jSignature({'UndoButton':false}); });

signatureparent {

    color:darkblue;
    background-color:white;
    padding: 15px;

}

/*This is the div within which the signature canvas is fitted*/
#signature {
padding: 0 0 0 0; 
margin: 0 0 0 0;
border: 1px dotted #000;
width: 100%;

}

[brinley]

Try adding a css height for fixed height or min-height for something responsive on #signature

[sameermotwani]

Hey,

Thanks for the reply. I tried doing the same and to no use. It's still the same.do you have any other pointers?

[ipeevski]

Same issue. Just noticed that in the first state (where it's squished), it does let you draw, but it's very distorted. If you try painting from the top-left corner, it shows in the middle of the canvas and as a really big dot/line ... just something that might help with investigation.

Browser: latest chrome

[brinley]

@ipeevski are you able to inspect the element to see if theres any css causing it to be squished?

[ipeevski]

No CSS, but I think I figured out what was doing it.

It happens if it's instantiated while it's hidden. When it comes into view, I have to call .resize() on it and it fixes itself. Perhaps not much that can be done about it :(

[brinley]

On resize is a work around. I believe that you should beable to force the signature's containiner to a certain fixed width/height or perhaps a if you need something semi responsive, see if you can set a min-width/height

[ipeevski]

Fixed height shows the container bigger, but the side effects of offset and distorted paint are still there until resize

[brinley]

How are you implementing this? I recall a similar issue being report years ago when jSignature was being used jQuery mobile. It turns out that the signature was being initialised just before the page was pushed into visible view and this caused the canvas dimensions to be incorrect. The solution for that was to initialise jQuery after the view was visible and not onload or on dom ready short of calling resize.

[ipeevski]

Well, as I said before, I think it is a similar issue - the signature div is in a display: none part when first initialised, and shown after that. When it is being shown, I call resize and it fixes itself. Again, it's probably more about listing this as a limitation than being able to fix it ...

[LencyBhalodiya]

Can you share the code for resize , since am facing same issue in jsignature the signature gets offset and also the signature gets shifted when switch to portrait to landscape view