I've read through a good amount of material without finding an answer to my particular question. I have a multi-page form that uses jSignature as the last tab. It is basically line for line from W3Schools website, but with my form. Anyway, it uses css for display:none on the tabs, then the code changes the displayed tab to display:block. This works great for everything except my jSignature. It is clearly reading the change, as it is visible (i.e. not in display:none), but it is compacted and unusable. UNTIL... you resize the screen. Then it pops back out. I've tried all sorts of styling in css for it, and changing the display: type in the JS, but it does the same.
Here is the mcve:
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="height=device height, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/willowsystems/jSignature/master/libs/jSignature.min.js"></script>
<style>
.tab {
display: none;
}
</style>
<body>
<form id="regForm" action="/action_page.php">
<div class="tab tab1">
Carrier:
<p><input type="text" oninput="this.className = ''" name="carrier" value="My Company"></p>
Location:
<p><select oninput="this.className = ''" name="location">
<option value="" disabled selected>Choose your location</option>
<option oninput="this.className = ''" value="PDX">PDX</option>
<option oninput="this.className = ''" value="SEA">SEA</option>
</select></p>
</div>
<div class="tab tab2">
Sign in the box below:
<input type="button" class="clear-button" value="Clear" style="float:right;"/>
<div class="signature-panel">
</div>
</div>
<img id="rendered" src="" style="display:none">
<br>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<span class="step"></span>
<span class="step"></span>
</form>
<script>
$('.signature-panel').jSignature();
$('.clear-button').on('click', function(e) {
$('.signature-panel').jSignature("reset");
});
var currentTab = 0;
showTab(currentTab);
function showTab(n) {
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
}
function nextPrev(n) {
var x = document.getElementsByClassName("tab");
if (n == 1 && !validateForm()) return false;
x[currentTab].style.display = "none";
currentTab = currentTab + n;
if (currentTab >= x.length) {
document.getElementById("regForm").submit();
return false;
}
showTab(currentTab);
}
function validateForm() {
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
for (i = 0; i < y.length; i++) {
if (y[i].value == "") {
y[i].className += " invalid";
valid = false;
}
}
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid;
}
</script>
</body>
</html>
And a link to test it: https://www.w3schools.com/code/tryit.asp?filename=G8DPE45DOMRR
Please help! Thank you!
