How can i stop a flexbox item from moving?

so I tried to create a signup page, displayed as a flex, so in the left I’ll have some “welcome ..etc” text and in the right the signup form. I also have a JS script so that whenever an input from the form isn’t “good”, a <small> message would show below the input; The problem is that whenever the script is executed, and a <small message shows up, my flex is resized and the message from the left side is moved down a bit. Is there anyway to achieve this without using position: sticky?

I’ll post here a code snippet and 2 photos;

Code

function myFunction(input) {
  var x = document.getElementsByClassName("message");
  for (let i = 0; i < x.length; i++) {
    x[i].innerHTML = "te pup dulce";
  }
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  background: rgb(206, 212, 212);
  color: #1c1e21;
}

.container {
  padding: 50px;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container h1 {
  flex-grow: 0;
}

#parent1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

small {
  color: red;
}

<body>
  <div id="header">
    <h1> salll </h1>
  </div>
  <section class="container">
    <div>
      <h1> message </h1>
    </div>
    <div id="parent1">
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
    </div>
  </section>

</body>

I know this is pretty basic but i tried almost everything (except sticky cause i don’t want that) and can’t figure this out ;

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Using a predefined height for <small> will work out

As mentioned in comments that <small> is deprecated, you can use other containers for the message like div span….

function myFunction(input) {
  var x = document.getElementsByClassName("message");
  for (let i = 0; i < x.length; i++) {
    x[i].innerHTML = "te pup dulce";
  }
}

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  background: rgb(206, 212, 212);
  color: #1c1e21;
}

.container {
  padding: 50px;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.container h1 {
  flex-grow: 0;
}

#parent1 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

small {
  color: red;
  height:20px;
}

<body>
  <div id="header">
    <h1> salll </h1>
  </div>
  <section class="container">
    <div>
      <h1> message </h1>
    </div>
    <div id="parent1">
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
      <button type="button" id="btn" onclick="myFunction()"> tap me </button>
      <small class="message"></small>
    </div>
  </section>

</body>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating