how do you maintain the dimensions of a container after some text is added dynamically in it?

Question

try to add:

position: relative;

to your input wrappers, and:

position: absolute;
bottom: -14px;

to your .warning block.

I also changed border width to 2px in invalid state so, it is the same as in normal state

let password = document.querySelector("input#password");
let confirmPassword = document.querySelector("input#confirmPassword");
let warningDiv = document.getElementsByClassName("warning");
password.addEventListener("input", getPassword);
confirmPassword.addEventListener("input", getPassword);

let pp, cp;
let warnInserted = false;

function getPassword(e) {
  let p = e.target;
  if (p.id === "password") {
    pp = e.target.value;
  } else if (p.id === "confirmPassword") {
    cp = e.target.value;
  }
  if (pp !== cp && !warnInserted) {
    let warning = document.createElement("p");
    warning.textContent += "*Passwords do not match.";
    warning.classList.add("warning");
    confirmPassword.insertAdjacentHTML("afterend", warning.outerHTML);
    warnInserted = true;
  } else if (pp == cp) {
    warningDiv[0].style.display = "none";
    warnInserted = false;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  background-image: url(https://images.unsplash.com/photo-1643836973129-015e3c240612?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: absolute;
}

#main {
  width: 40%;
  margin: 0 auto;
  text-transform: uppercase;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  background-color: rgba(177, 173, 173, 0.514);
  border-radius: 5px;
}

.firstname,
.email,
.lastname,
.phone,
.password {
  display: flex;
  flex-direction: column;
  flex-basis: 40%;
  margin: 3% 2%;
  font-size: 0.9rem;
  position: relative; // <--- ADDED
}

.submitbtn {
  margin-top: 4%;
  text-align: start;
}

button {
  border: 2px solid rgba(211, 207, 207, 0.747);
  height: 35px;
  width: 8rem;
  font-size: 0.9rem;
  font-weight: normal;
  background-color: rgba(190, 190, 197, 0.726);
  color: black;
  border-radius: 4px;
}

button:hover {
  transform: translateY(-4px);
  box-shadow: 1px 1px 6px 2px black;
}

input {
  appearance: none;
  height: 23px;
  border-radius: 4px;
  border: 2px solid rgba(211, 210, 210, 0.726);
}

input:invalid {
  appearance: none;
  border: 2px solid red // <--- MODIFIED
}

.warning {
  color: red;
  margin: 1px 6px;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: none;
  position: absolute; // <--- ADDED
  bottom: -14px; // <--- ADDED
}

@media (max-width: 960px) {
  .wrapper {
    display: block;
    padding: 20px;
  }
  .firstname,
  .email,
  .lastname,
  .phone {
    margin: 3% 2%;
  }
}

@media (max-width: 500px) {
  #main {
    min-width: 200px;
  }
  input {
    min-width: 120px;
  }
  .submitbtn {
    margin-top: 12%;
  }
  .firstname,
  .email,
  .lastname,
  .phone,
  .password {
    line-height: 1.6rem;
  }
}

<!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">
  <link rel="stylesheet" href="style.css">
  <title>Sign-Up Form</title>
</head>

<body>
  <div id="main">
    <form>
      <div class="wrapper">
        <div class="firstname">
          <label for="firstname">First Name</label>
          <input type="text" name="firstname" id="firstname" required>
        </div>
        <div class="lastname">
          <label for="lastname">Last Name</label>
          <input type="text" name="lastname" id="lastname" required>
        </div>
        <div class="email">
          <label for="email">Email</label>
          <input type="email" name="email" id="email" required>
        </div>
        <div class="phone">
          <label for="tel">Phone Number</label>
          <input type="tel" name="tel" id="tel" required>
        </div>
        <div class="password">
          <label for="password">Password</label>
          <input type="password" name="password" id="password" required>
        </div>
        <div class="password">
          <label for="password">Confirm Password</label>
          <input type="password" name="confirmPassword" id="confirmPassword" required>
        </div>
      </div>
      <div class="submitbtn">
        <button type="submit">Submit</button>
      </div>
    </form>
  </div>
  <script src="form.js" defer></script>
</body>

</html>

Leave a Comment Cancel Reply