My jquery mobile app is displaying 3 jsignature divs correctly on certain pages, but not on others. The problem arises when the div shows up with a squished height and is unresponsive to touch:
Currently, I'm loading these divs using a document ready function at the bottom of the page, which seems fine:
<div id="info" data-role="page" data-theme="c">
<div data-role="header" data-theme="b>
<h1>NewF</h1>
</div>
<div data-role="content">
<form datapersist="garlic" encoding="multipart/form-data" encType="multipart/form-data">
<input type="text" placeholder="Your Name" name="_fid_14" id="_fid_14" />
</form>
</div></div>
... (additional HTML code for signature pages)
But when I change the structure so each signature loads on its own page, they lose size and functionality. Here's an example:
(modified HTML code)
... (new structure where signatures are loaded individually on different pages)
I've attempted to use pageinit on the signature pages as well, but encountered the same issue:
(tried using pageinit on signature pages)
The signatures work correctly on one sub-page but not on another. This discrepancy has left me puzzled. Any insights or suggestions would be greatly appreciated!
- Update: Upon directly refreshing /index.html#fcmsignature, the signature displays correctly. Therefore, the problem appears to be related to the initialization of the signatures. I have tried pageinit without success and also experimented with data-transition="none" on buttons, but no improvement.