Stop HTML elements from shifting position when content is modified using JavaScript

Question

Stop HTML elements from shifting position when content is modified using JavaScript

'use strict';

const countdown = () => {
  // create function to calculate time until launch in Days/Hours/Minutes/Seconds

  // time difference
  const countDate = new Date('May 25, 2024 00:00:00').getTime();
  const now = new Date().getTime();
  const gap = countDate - now;

  const second = 1000;
  const minute = second * 60;
  const hour = minute * 60;
  const day = hour * 24;

  const textDay = Math.floor(gap / day);
  const textHour = Math.floor((gap % day) / hour);
  const textMinute = Math.floor((gap % hour) / minute);
  const textSecond = Math.floor((gap % minute) / second);

  // update time in HTML
  document.querySelector('.day').innerText = textDay;
  document.querySelector('.hour').innerText = textHour;
  document.querySelector('.minute').innerText = textMinute;
  document.querySelector('.second').innerText = textSecond;
};

// runs function every second
setInterval(countdown, 1000);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  font-family: 'Rubik', sans-serif;
  color: #f8f9fa;
}
.countdown-container {
  color: #343a40;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(
      rgba(34, 34, 34, 0.1),
      rgba(34, 34, 34, 0.1)
    ),
    url(./img/countdown.jpg);
  background-size: cover;
}
.countdown-container h2 {
  letter-spacing: 0.1rem;
  font-size: 10rem;
  font-weight: 700;
  padding: 5rem;
  padding-bottom: 8vh;
}
.countdown {
  display: flex;
  text-align: center;
  justify-content: space-around;
}
.day,
.hour,
.minute,
.second {
  font-size: 5rem;
}

<!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="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
</head>

<body>
  <section class="countdown-container">
    <div>
      <h2 class="countdown-header">Time until Launch</h2>
      <div class="countdown">
        <div class="container-day">
          <h3 class="day">Time</h3>
          <h3>Days</h3>
        </div>
        <div class="container-hour">
          <h3 class="hour">Time</h3>
          <h3>Hours</h3>
        </div>
        <div class="container-minute">
          <h3 class="minute">Time</h3>
          <h3>Minutes</h3>
        </div>
        <div class="container-second">
          <h3 class="second">Time</h3>
          <h3>Seconds</h3>
        </div>
      </div>
    </div>
  </section>
  <script src="./app.js"></script>
</body>
</html>

Hi,

I created a countdown timer, but I am facing an issue where the elements move slightly every time the numbers are updated. How can I fix this? The problem is visible in the code snippet provided above...

(Random text, I need to add more content to post... Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro qui inventore ad fugit ea non harum est quas deserunt quia!)

Thank you :)

javascript html css

Answer 1

Answer №1

One reason for this behavior is the CSS property justify-content: space-around; being applied to the .countdown class. When the div containing the seconds (and others) does not have a fixed width, the width of the parent div changes based on the varying text width when using a variable-width font. Consequently, justify-content: space-around; adjusts the layout to ensure equal spacing between elements.

To mitigate this issue, consider using a monospace font if your design requirements allow it.

An alternative solution is to assign a specific width to all time segments to maintain consistency:

div.countdown>div {
  width: 40px;
}

I opted for a fixed width of 40px in my example, but you may need to experiment with other values. I also tested with 25% width, which improved the situation but caused slight movement in the seconds display.

'use strict';

const countdown = () => {
  // Function to calculate time until launch in Days/Hours/Minutes/Seconds

  // Time difference
  const countDate = new Date('May 25, 2024 00:00:00').getTime();
  const now = new Date().getTime();
  const gap = countDate - now;

  const second = 1000;
  const minute = second * 60;
  const hour = minute * 60;
  const day = hour * 24;

  const textDay = Math.floor(gap / day);
  const textHour = Math.floor((gap % day) / hour);
  const textMinute = Math.floor((gap % hour) / minute);
  const textSecond = Math.floor((gap % minute) / second);

  // Update time in HTML
  document.querySelector('.day').innerText = textDay;
  document.querySelector('.hour').innerText = textHour;
  document.querySelector('.minute').innerText = textMinute;
  document.querySelector('.second').innerText = textSecond;
};

// Run function every second
setInterval(countdown, 1000);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  font-family: 'Rubik', sans-serif;
  color: #f8f9fa;
}
.countdown-container {
  color: #343a40;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(
      rgba(34, 34, 34, 0.1),
      rgba(34, 34, 34, 0.1)
    ),
    url(./img/countdown.jpg);
  background-size: cover;
}
.countdown-container h2 {
  letter-spacing: 0.1rem;
  font-size: 10rem;
  font-weight: 700;
  padding: 5rem;
  padding-bottom: 8vh;
}
.countdown {
  display: flex;
  text-align: center;
  justify-content: space-around;
}
.day,
.hour,
.minute,
.second {
  font-size: 5rem;
}

div.countdown>div {
  width: 40px;
}

<!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="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
</head>

<body>
  <section class="countdown-container">
    <div>
      <h2 class="countdown-header">Time until Launch</h2>
      <div class="countdown">
        <div class="container-day">
          <h3 class="day">Time</h3>
          <h3>Days</h3>
        </div>
        <div class="container-hour">
          <h3 class="hour">Time</h3>
          <h3>Hours</h3>
        </div>
        <div class="container-minute">
          <h3 class="minute">Time</h3>
          <h3>Minutes</h3>
        </div>
        <div class="container-second">
          <h3 class="second">Time</h3>
          <h3>Seconds</h3>
        </div>
      </div>
    </div>
  </section>
  <script src="./app.js"></script>
</body>
</html>

Answer 2

One reason for this behavior is the CSS property justify-content: space-around; being applied to the .countdown class. When the div containing the seconds (and others) does not have a fixed width, the width of the parent div changes based on the varying text width when using a variable-width font. Consequently, justify-content: space-around; adjusts the layout to ensure equal spacing between elements.

To mitigate this issue, consider using a monospace font if your design requirements allow it.

An alternative solution is to assign a specific width to all time segments to maintain consistency:

div.countdown>div {
  width: 40px;
}

I opted for a fixed width of 40px in my example, but you may need to experiment with other values. I also tested with 25% width, which improved the situation but caused slight movement in the seconds display.

'use strict';

const countdown = () => {
  // Function to calculate time until launch in Days/Hours/Minutes/Seconds

  // Time difference
  const countDate = new Date('May 25, 2024 00:00:00').getTime();
  const now = new Date().getTime();
  const gap = countDate - now;

  const second = 1000;
  const minute = second * 60;
  const hour = minute * 60;
  const day = hour * 24;

  const textDay = Math.floor(gap / day);
  const textHour = Math.floor((gap % day) / hour);
  const textMinute = Math.floor((gap % hour) / minute);
  const textSecond = Math.floor((gap % minute) / second);

  // Update time in HTML
  document.querySelector('.day').innerText = textDay;
  document.querySelector('.hour').innerText = textHour;
  document.querySelector('.minute').innerText = textMinute;
  document.querySelector('.second').innerText = textSecond;
};

// Run function every second
setInterval(countdown, 1000);

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
  font-family: 'Rubik', sans-serif;
  color: #f8f9fa;
}
.countdown-container {
  color: #343a40;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: linear-gradient(
      rgba(34, 34, 34, 0.1),
      rgba(34, 34, 34, 0.1)
    ),
    url(./img/countdown.jpg);
  background-size: cover;
}
.countdown-container h2 {
  letter-spacing: 0.1rem;
  font-size: 10rem;
  font-weight: 700;
  padding: 5rem;
  padding-bottom: 8vh;
}
.countdown {
  display: flex;
  text-align: center;
  justify-content: space-around;
}
.day,
.hour,
.minute,
.second {
  font-size: 5rem;
}

div.countdown>div {
  width: 40px;
}

<!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="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css">
  <title>Test</title>
</head>

<body>
  <section class="countdown-container">
    <div>
      <h2 class="countdown-header">Time until Launch</h2>
      <div class="countdown">
        <div class="container-day">
          <h3 class="day">Time</h3>
          <h3>Days</h3>
        </div>
        <div class="container-hour">
          <h3 class="hour">Time</h3>
          <h3>Hours</h3>
        </div>
        <div class="container-minute">
          <h3 class="minute">Time</h3>
          <h3>Minutes</h3>
        </div>
        <div class="container-second">
          <h3 class="second">Time</h3>
          <h3>Seconds</h3>
        </div>
      </div>
    </div>
  </section>
  <script src="./app.js"></script>
</body>
</html>

Stop HTML elements from shifting position when content is modified using JavaScript

Answer №1

Similar questions

Hybrid component that combines static and dynamic elements in Gatsby

Adjusting the cell size to align with the height of another cell in the same row

Which one should I use: ng-repeat or ng-options?

Every time I try to access Heroku, I encounter an issue with Strapi and the H10 error code

Building a custom form layout using Bootstrap v4 with three input fields and a button all lined up on one

Converting Ajax to JSON with Jquery offline and Manifest for enhanced offline web applications

What is the best way to swap out an HTML file with another without altering the link?

What methods can I use to ensure the headline remains fixed like the table headers?

Error: Unable to execute workouts.map as a function in "React" due to a TypeError

I keep encountering a 'Missing Permissions' issue whenever I attempt to execute the ban command in Discord.js. What could be causing this problem?

Personalize Material design slider Label - final element

Using a percentage width on a <div> element with the "overflow-x: scroll" property does not seem to be functioning properly, even when encapsulated within

Preventing navbar resizing on websites

Encountering a 404 error when typing a link and refreshing the page in Laravel combined with VueJS

Ensure that items are properly aligned within a container with full width and an overflow:scroll property

Is there an easy way to determine if an element inside a Vue component is overflowing?

What is the proper way to add process.env.PORT to the script declarations string within my package.json file?

Acquire HTML content and save it in a MYSQL database: A Step-by-Step Guide

Encounter the error "Attempting to access object using Object.keys on a non-object" when attempting to retrieve all fields in request.body in Node.js?

limitation in bootstrap ensures that only one collapse element is open at any