In an effort to familiarize myself with front-end development, I took on the challenge of creating a simple calculator. Opting to utilize the grid-layout due to the static nature of the content and my desire for flexibility in button sizes both vertically and horizontally, I configured a 4x6 grid that allowed me to layout everything exactly as intended.
To gain better insight into my issue, I have shared a working example on Codepen.io. The problem I encountered is related to the variation in row heights within the grid-layout.
Below is a snippet of the CSS used:
.calculator-grid-container {
height: 70vh;
width: 60vw;
max-width: 50vh;
border-style: solid;
border-width: 3px;
border-color: white;
background-color:#2e323a;
border-radius: 1%;
box-shadow: 0 0 10px whitesmoke;
/* grid container config */
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 0px;
padding: 10px;
}
The buttons are rendered within a div using the specified class:
render() {
return (
<div className='calculator-grid-container'>
<Display current={this.state.current} formula={this.state.formula}></Display>
<Button name='AC' handleButtonPressed={this.handleButtonPressed}></Button>
<Button name='/' handleButtonPressed={this.handleButtonPressed}></Button>
<Button name='*' handleButtonPressed={this.handleButtonPressed}></Button>
<!-- More Button Elements Here -->
</div>
);
}
I am utilizing flex-layout on the buttons to ensure text alignment:
.button {
display: flex;
justify-content: center;
align-items: center;
}
For example, each button has specific styling such as:
.AC-button {
grid-column-start: 1;
grid-column-end: 3;
}
The main issue arises with the first row containing two paragraph elements:
render() {
return (
<div className='display'>
<p className='formula'>
{this.props.formula}
</p>
<p className='current' id='display'>
{this.props.current}
</p>
</div>
);
}
The CSS applied to these elements is causing inconsistencies in row heights and element sizing:
.display {
background-color: black;
text-align: right;
font-family: digital;
padding: 5px 10px 0 0;
/* grid config */
grid-column-start: 1;
grid-column-end: 5;
/* Applying flex-layout inside the div to align the p-elements */
display: flex;
flex-direction: column;
justify-content: center;
align-items: right;
}
.formula {
opacity: 0.5;
overflow-wrap: break-word;
word-wrap: break-word;
}
.current {
font-size: 46px;
}
The identified problems include inconsistent row heights, varying size based on font-size changes, and fluctuating size when the .formula element is empty.
If you have insights or solutions to address these issues, your assistance would be greatly appreciated!
View screenshots showcasing the discrepancies: https://i.sstatic.net/ALPuh.png https://i.sstatic.net/t6RTm.png