title: Signature Pad disables checkbox
body: <p>I am using <a href="https://github.com/wulfsolter/angular2-signaturepad" rel="nofollow noreferrer">angular2-signaturepad</a> library for my <code>Ionic 3</code> application and signature pad is working fine inside the application. Now, i have added dynamic html to a <code>div</code> and inside the the dynamic html currently a single checkbox but there will be more in it.</p>
  
  <p>In .html file:</p>
  
  <pre><code>  &lt;ion-row&gt;
      &lt;ion-col&gt;
          &lt;div class="letter-body white-space-pre-line"
                   [innerHTML]="testData | safeHtml:'html'"&gt;&lt;/div&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
    &lt;ion-row class="patient-signature-pad-input"&gt;
      &lt;ion-col class="singnature-pad-col"&gt;
        &lt;signature-pad [options]="signaturePadOptions"
                       (onEndEvent)="drawCompletePat()"&gt;&lt;/signature-pad&gt;
      &lt;/ion-col&gt;
    &lt;/ion-row&gt;
  </code></pre>
  
  <p>In .ts file:</p>
  
  <pre><code>this.testData = "&lt;input type='checkbox' /&gt;"
  </code></pre>
  
  <p>Now, the checkbox is rendered in the html properly but when i am trying to check the checkbox, it's not working. </p>
  
  <p>But, the fun part is that, when i am removing the signature pad from the html, then i can check the checkbox easily.</p>
  
  <p><strong>Note:</strong> No <code>z-index</code> has been set for signature pad.</p>
  
  <p>Can anyone point me out what signature pad is doing with the checkbox added using <code>innerHTML</code>?</p>