I'm currently working on a multi-step form project with three tabs, each containing a different section of the form and varying heights. The challenge I'm facing is to center the tallest tab vertically on the page, while aligning the other two tabs to the top of the tallest tab. I've tried various CSS approaches but haven't been able to achieve the desired result. I've included my code and a GIF showcasing my intended outcome. Thank you for your time!
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");
x[currentTab].style.display = "none";
currentTab = currentTab + n;
if (currentTab >= x.length) {
document.getElementById("regForm").submit();
return false;
}
showTab(currentTab);
}body {
height: 100vh;
margin: 0;
display: grid;
align-content: center;
}
#regForm {
background-color: #ffffff;
padding: 40px;
width: 50%;
min-width: 300px;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
input.invalid {
background-color: #ffdddd;
}
.tab {
display: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="app.css">
</head>
<body>
<form id="regForm" action="">
<h1>Register:</h1>
<div class="tab">Name:
<p><input placeholder="First name..." oninput="this.className = ''"></p>
<p><input placeholder="Last name..." oninput="this.className = ''"></p>
</div>
<div class="tab">Contact Info:
<p><input placeholder="E-mail..." oninput="this.className = ''"></p>
<p><input placeholder="Phone..." oninput="this.className = ''"></p>
<p><input placeholder="Address" oninput="this.className = ''"></p>
<p><input placeholder="Fax" oninput="this.className = ''"></p>
</div>
<div class="tab">Birthday:
<p><input placeholder="dd" oninput="this.className = ''"></p>
<p><input placeholder="mm" oninput="this.className = ''"></p>
<p><input placeholder="yyyy" oninput="this.className = ''"></p>
</div>
<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>
</form>
<script src="app.js"></script>
</body>
</html>