Search code examples
htmlcssangularlayout

CSS styling when text added into element, pulls element down the page

I'm building a custom calculator in Angular and struggling to understand exactly what is happening here. I have 5 div elements, set to 10vw height and width. On start up there is nothing in the div. I have sets of buttons which reflect 0-9, which then feed into these div elements, back to front (so effectively typing a value, with a forced decimal point at two numbers). The problem arises when I enter a value and it populates into the div. At this point it pulls the div down the page and continues until all 5 have a value in, then all 5 re-align to the top.

CSS align issue

I have created a working demo of this project on StackBlitz.

My div elements are:

 <div class="value">
    <div class="box">{{ digit5 }}</div>
    <div class="box">{{ digit4 }}</div>
    <div class="box">{{ digit3 }}</div>
    .
    <div class="box">{{ digit2 }}</div>
    <div class="box">{{ digit1 }}</div>
  </div>

And the immediate CSS for the two elements are:

.value {
  font-size: 9vw;  
  text-align: center
}
.box {
  border: 1px solid;
  width: 10vw;
  height: 10vw;
  display: inline-flex;
  margin: 1vh 1vw;
  flex-direction: row;
}

I'm sure this is something really simple - but I just don't understand why

Can anyone shed any light on what I'm doing wrong and why it's doing what its doing?

Many thanks!

Solution

  • So what I would do is make two simple adjustments to two of your css classes and you will be all set.
    First you should update the value class to include a display flex and to justify the content center...

    .value {
  font-size: 9vw;
  text-align: center;
  display: flex;
  justify-content:center;
}

    That will fix the immidate problem you are facing and will keep the box(es) from shifting up and down... As an extra +1 tip I'd also update the .box class to have a flex-direction: column (it instead of row) and you will have a beautiful display ready to go. (Doing such will center your number in the box).

    .box {
  border: 1px solid;
  width: 10vw;
  height: 10vw;
  display: inline-flex;
  margin: 1vh 1vw;
  flex-direction: column;
}