Tuesday

How to maintain the dimensions of container after some text is added dynamically in it?

Issue

This is a form that I created and I am adding a warning if the password entered doesn't match using javascript. The problem is that when the text is appended it makes the container items move upward or maybe the bottom downward. Is there a way to make it so that I can add the text without the effect of other items being pushed up or the container bottom being pushed downwards?

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

.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: 1px solid red
}

.warning {
  color: red;
  margin: 1px 6px;
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: none;
}

@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>

Solution

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>

Answered By - Andriy

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Tuesday

How to maintain the dimensions of container after some text is added dynamically in it?

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels