After searching through numerous resources, I have been unable to find a solution to my specific issue. I have a multi-page form that incorporates jSignature as the final tab. The structure closely follows the example from the W3Schools website, tailored to fit my form. The problem arises when using CSS to hide and display tabs - it works perfectly except for the jSignature section. Despite changing the display property in both the CSS and JavaScript, the jSignature remains compacted and unusable until the screen is resized, at which point it expands as intended. I have experimented with various CSS styles and attempts to modify the display type in the JS code, but the issue persists.
Here is a simplified example which reproduces the problem:
<!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>
For testing purposes, you can access this example at the following link: https://www.w3schools.com/code/tryit.asp?filename=G8DPE45DOMRR
I would greatly appreciate any assistance in resolving this issue. Thank you!