Question 192418 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – Two in-line blocks <span> within a flex direction container <div>

I’m running a JS script with a counter which works fine. However, in order to reduce the size of the data-val from 60,000 to 60k the script can’t understand anything that is not an integer.

I’ve tried to add an additional <span>K</span> to convert the numeric value so the users understand we are talking about thousands.

Because my container has a flex-direction: column all elements I add are being stacked vertically, which is not what I want to achieve.

Have tried using display: inline-block and also flex-direction: row but not really working here either. I’m not sure if I could override the container CSS just for this element or if a completely different approach shall be pursued.

let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});
.wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
  }
<div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <span class="num-itemcounter" data-val="60">00</span>
    <span class="metric-itemcounter">K</span>
    <span class="text-itemcounter">Happy Partners</span>
  </div>
</div>
Tags:

3

Answers


  1. 0

    You have to wrap the number and k span in a div and give that div flex-direction of row.

    let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});
    .wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
  }
  .num-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
    <div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <div class="num-container">
        <span class="num-itemcounter" data-val="60">00</span>
        <span class="metric-itemcounter">K</span>
    </div>
    <span class="text-itemcounter">Happy Partners</span>
  </div>
</div>

    Happy Coding 😉

    Login or Signup to reply.
  2. 0 
    let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});
    .wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
  }
  
    <div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <article>
      <span class="num-itemcounter" data-val="60">00</span><span class="metric-itemcounter">K</span>
      <br>
      <span class="text-itemcounter">Happy Partners</span>
    </article>
  </div>
</div>

    I saw the other answer up there, you would take theirs for CSS, but using a little trick with HTML, we can use the <article> tag to enduce non-breaks unless specified with <br>.

    Hope this helps!

    Login or Signup to reply.
  3. 0

    See this modification with flex-wrap: wrap and flex-grow: 1:

    let valueDisplays = document.querySelectorAll(".num-itemcounter");
let interval = 1500;

valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function() {
    startValue += 1;
    valueDisplay.textContent = startValue;
    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});
    .wrapper-itemcounter {
  margin: auto;
  width: auto;
  padding: 10px;
  position: relative;
  display: flex;
  justify-content: space-around;
  border-radius: 10px;
}

.container-itemcounter {
  width: 22vmin;
  height: 22vmin;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 0.5em;
  border-bottom: 10px solid #00ccbd;
  box-shadow: 3px 5px 5px 0px #8c9c9c;
 }
 
 .text-itemcounter {
  flex-grow: 1;
 }
    <div class="wrapper-itemcounter">
  <div class="container-itemcounter">
    <span class="num-itemcounter" data-val="60">00</span>
    <span class="metric-itemcounter">K</span>
    <span class="text-itemcounter">Happy Partners</span>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search