Specified Width and height = sizing problem with jSignature

[dvdotsenko]

(from bug reporter)

Hi Daniel ,

Firstly i have to say awesome work about jSignature , that's cool !

Recent days , i'm working with a prototype project based on Mobile platforms and one main feature of this project is to capture user's input and conserving it locally. ( through database).

but i found a strange thing that the parameters of width and height are not working as they should be from the API doc, the situation is :

if i don't add these two parameters , everything is fine , the width will automatically fit with device and it seems the height is one third of the height value. say : mine are <canvas class="jSignature" style="width: 100%; height: 317px;" width="1266" height="319"></canvas> )

but if i add the width and height parameters when initializing , no matter what the values are, the canvas turns out to be as some strange values such as : <canvas class="jSignature" style="" width="302" height="152"></canvas>

it seems these are the default values of the canvas. but the other parameters are working fine.

It would be appreciated if you could give me some advices for this very odd behaviour.

Best regards

[dvdotsenko]

1. The issue is fixed. https://github.com/brinley/jSignature/pull/18
2. The reason we had original problem is bad. Earlier versions allowed specifying fixed size parameters to jSignature. This is counter to proportional / adaptive page designs. A more flexible approach would be to make users style the wrapping, parent container (div) and fill it / inherit some styles from it.

So, while $(o).jSignature({'width':500}) now works again, I strongly recommend against its use. I recommend to style the parent div, the one that will be filled with jSignature. That parent div is accessible to and is under full control of the user. The div can be set to fixed size, "max-***" size, proportional size etc. The style of that div could vary with viewport sizes.

Please, see Demo page (http://willowsystems.github.com/jSignature/#/demo/) for an example of styling of the parent div. Example:

<div id="parentofsignature">
    ...
    <div id="signature"><!-- jSignature fills this with stuff --></div>
</div>

#signatureparent {
  color:darkblue;
  background-color:lightgrey;
  padding: 15px;
  max-size: 824px;
}

#signature {
  padding: 0 0 0 0; 
  margin: 0 0 0 0;
  border: 2px dotted #000;
  width: 75%;
}