Keep item aligned vertically at same point when height of content changes

Question

I am creating a form which has three steps (tabs), each tab contains a different part of the form and is a different height. I want the largest tab to be vertically centered on the page and the other two to be vertically aligned to the top of the largest tab. I've experimented with different CSS options but can't seem to get it to work, I've attached my code as well as a gif of my expected result. Thank you for taking the time to read this!

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;
}




    
    
    
    Document
    


    

        Register:
        
        Name:
          
          
        
        
        Contact Info:
          
          
          
          
        
        
        Birthday:

user_8620333 · Answer

Use CSS grid to define the layout and make all the tab above each other (on the same grid area) then rely on visibility instead of display.

You only need 2 CSS declaration added to your code:

var currentTab = 0;
showTab(currentTab);

function showTab(n) {
  var x = document.getElementsByClassName("tab");
  x[n].style.visibility = "visible";
  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.visibility = "hidden";
  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;
  display:grid; /* added */
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px;
  font-family: Raleway;
  border: 1px solid #aaaaaa;
}

input.invalid {
  background-color: #ffdddd;
}

.tab {
  visibility:hidden;
  grid-area:2/1; /* added */
}




    
    
    
    Document
    


    

        Register:
        
        Name:
          
          
        
        
        Contact Info:
          
          
          
          
        
        
        Birthday:

Keep item aligned vertically at same point when height of content changes

1 Answers