Problem when show/hide the canvas

[n2lose]

I am having an issue when show/hide the canvas. I created a page using bootstrap tabs, on each tabs, i have an signature canvas. In first time page loaded, the canvas display well on 2 tabs, but when switch back tabs, the width/height of that canvas set to 0. As i debugging it, the function calculateScale() called to calculate the width/height and ratio of canvas, but when the canvas is hidden, it can't get the width/height.

How can i re-call to init width/height from the values that passed as property param in the directive?

<div class="container" style="max-width: 700px; max-height: 300px">
    <signature-pad accept="accept" clear="clear" height="220" width="568" dataurl="dataurl"></signature-pad>

[ahovingh]

I've also been having this problem. I ended up with a workaround of sorts. If you set the height on the .signature class with !important, it should do the trick. Just make sure that value is bigger than the height you specified on the control itself as it limits it with max-height.

[n2lose]

@ahovingh : Could you show your workaround? I also fixed it by the way added an timeout to calculate with/height of that canvas containner. But it raise another problem, when you clear, the scale set to 0, the cursor point to a place but signature draw another place( as you zoom in)

[glaidler]

Hi, I can't get this workaround working; using ng-show and ng-hide / or ng-if doesn't work with this directive.

[n2lose]

@glaidler : workaround just need to re-call the function calculateScale to re-calculate width/height of signatures

[fjaxyu]

I was experiencing a similar problem where the signature-pad canvas was height: 0, width: 0. My workaround was adding a style to the <signature-pad style="min-height: 200px; min-width: 500px;" ...>