Issue
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.
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;
}
Answered By - Sharp Dev
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.