I'm trying to create a simple calculator using only HTML and CSS for the layout and, eventually, pure JavaScript for the functions.
I want the site/page to be responsive which is why I am using CSS Grid and no absolute units; % and fr instead of px...
The calculator itself should be a grid of centred squares with the text in the buttons centred both horizontally and vertically and all of the buttons should fit within the "calculator".
<html>
<body>
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
</body>
</html>
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
padding: 1%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 2%;
justify-items: center;
align-items: center;
}
div.calc > button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
vertical-align: center;
text-align: center;
width: 100%;
height: 0;
padding: 50%;
}
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
Codepen
The calculator div does not appear to be high enough to hold the buttons and the bottom row of the grid therefore overlaps and bleeds outside of the calculator.
I tried playing around with the height of the calc div (height: 100% ...) but the last row always goes over...
I can't seem to get the text inside the button to centre properly; especially horizontally. The '+ / -' button is a good example. I've set the text-align as center and both the justify-items and align-items are center. I know those last two refer to the button items themselves within the grid. But I can't see where else to get the text to centre properly.
I'm hoping this is something outright simple and I've just been staring at the same code, over and over again, for oh too many hours.
If you would rather not correct my code and prefer to point me to any online examples or explanations which would help I will gladly do my homework.
Thanks!
The issue is the grid-gap:2%. It's working for horizontally because we can resolve the 2% based on the width but for the height it won't work since there is no height defined. Basically, the browser is first calculation the height without the gap, then the gap is addedd.
You should consider px or another unit like vw/vh for this one. I have also changed the way you are centring the button. (Centering in CSS Grid)
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 1vw;
padding: 1vw; /*make the padding the same*/
}
div.calc>button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
/*to center*/
display: flex;
align-items: center;
justify-content: center;
/**/
}
/*keep the ratio*/
div.calc>button:before {
content: "";
display: inline-block;
padding-top: 100%;
}
/**/
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
Alternative solution with flexbox method with three column button box. I hope this will be helpful for you.
* {
box-sizing: border-box;
position: relative;
}
div.calc {
max-width: 80%;
margin: 1% auto;
border: 2px solid #111111;
border-radius: 5px;
padding: 1%;
/* display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 2%;
justify-items: center;
align-items: center; */
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 auto;
}
div.calc > button {
background-color: lightgrey;
color: darkblue;
border: 2px solid #111111;
border-radius: 5px;
font-size: 2em;
cursor: pointer;
vertical-align: center;
text-align: center;
height: 0;
padding: 12%;
flex-grow: 1;
width: 31%;
height: 31%;
margin: 5px;
}
button#bp,
button#bd {
background-color: blue;
color: yellow;
}
button#bc {
background-color: red;
color: white;
}
button#bb {
background-color: yellow;
color: blue;
}
button#be {
background-color: green;
color: yellow;
}
<div class="calc">
<button id="bp">+ / -</button>
<button id="bc">C</button>
<button id="bb">X</button>
<button id="b7">7</button>
<button id="b8">8</button>
<button id="b9">9</button>
<button id="b4">4</button>
<button id="b5">5</button>
<button id="b6">6</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="bd">.</button>
<button id="b0">0</button>
<button id="be">=</button>
</div>
Related
I have a title and a button. The title should be left-aligned and the button should be right-aligned. But I have a problem that the button goes up.
How to align title and button on the same line?
.page-header {
margin: -16px -16px 16px;
padding: 16px;
color: $white;
background-color: $red;
}
<header class="page-header">
<h1>{{title }}</h1>
<span fxFlex></span>
<button mat-icon-button>
<mat-icon>navigate_before</mat-icon>
</button>
</header>
Add this CSS on page-header class:
.page-header {
...;
display: flex;
justify-content: space-between;
align-items: center;
}
Display Method
.page-header {
border: 1px solid black;
}
.display-child-element {
display: inline-block;
vertical-align: middle;
border: 1px solid red;
}
<header class="page-header">
<h1 class="display-child-element">TITLE</h1>
<button class="display-child-element">TEST</button>
</header>
Flexbox Method
.flex-parent-element {
display: flex;
border: 1px solid black;
width: 50%;
}
.flex-child-element {
flex: 1;
border: 1px solid red;
}
<header class="page-header flex-parent-element">
<h1 class="flex-child-element">TITLE</h1>
<button class="flex-child-element">TEST</button>
</header>
Grid Method
.grid-container-element {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
border: 1px solid black;
width: 50%;
}
.grid-child-element {
margin: 10px;
border: 1px solid red;
}
<header class="page-header grid-container-element">
<h1 class="grid-child-element">TITLE</h1>
<button class="grid-child-element">TEST</button>
</header>
This question already has answers here:
How to center content and make the background cover the full column when using CSS Grid?
(1 answer)
Why doesn't the inline-block element occupy full height in the following example?
(5 answers)
Closed 1 year ago.
I wish to make a button, using CSS grid, with the elements filling the full height of the container:
button {
display: grid;
height: 50px;
grid-auto-flow: column;
align-items: center;
}
.one {
color: white;
background-color: purple;
border-right: 1px solid red;
}
<button>
<span class="one">one</span>
<span class="two">two</span>
</button>
As one can see from the inspector, this is a single row, that doesn't fill the height of the container:
I'd like the grid to fill the container, so the whole left of the container is purple.
You can do it with height: 100%; on any of the items inside the grid
Working example:
button {
display: grid;
height: 50px;
grid-auto-flow: column;
align-items: center;
}
.one {
color: white;
background-color: purple;
border-right: 1px solid red;
height: 100%;
}
<button>
<span class="one">one</span>
<span class="two">two</span>
</button>
If you want the text centered verticaly you can use display: grid or display: inline-grid and align-items: center.
Working example:
button {
display: grid;
height: 50px;
grid-auto-flow: column;
align-items: center;
}
.one {
color: white;
background-color: purple;
border-right: 1px solid red;
height: 100%;
align-items: center;
display: grid;
}
<button>
<span class="one">one</span>
<span class="two">two</span>
</button>
button {
display: grid;
height: 50px;
grid-auto-flow: column;
align-items: center;
}
.one {
color: white;
background-color: purple;
border-right: 1px solid red;
}
span {
display: flex;
align-items: center;
height: 100%;
}
<button>
<span class="one">one</span>
<span class="two">two</span>
</button>
I have a button which I want it to centered but the position should be right of the footer. I have the done the CSS of footer section but the button is sticking to the bottom. I want it in center like I want the button to move upwards so that it looks like it is positioned perfectly:
Here is the screenshot:
I want it in the center like this:
Here is my code of ReactJS:
.footer__section {
position: sticky;
color: lightgray;
display: flex;
align-items: right;
padding: 30px;
bottom: 0;
border-top: 1px solid gray;
}
.footer__section>form {
flex: 1;
}
.chat__inputButton {
position:absolute;
right: 0;
margin-right: 10px;
}
<div className="footer__section">
<form>
<button
className="chat__inputButton"
type="submit"
>
Send Message
</button>
</form>
</div>
.footer__section {
position: sticky;
color: lightgray;
display: flex;
align-items: right;
justify-content:right;
padding: 30px;
bottom: 0;
border-top: 1px solid gray;
border: 1px red solid; // debug
}
.footer__section>form {
flex: 1;
display: flex;
width: 100%;// <-
align-items: flex-end;
justify-content: flex-end;
}
.chat__inputButton {
margin-right: 10px;
}
<div class="footer__section">
<form>
<button
class="chat__inputButton">Cancel</button>
<button
class="chat__inputButton"
type="submit"
>
Send Message
</button>
</form>
</div>
I'm making a simple calculator page but I'm having a lot of trouble aligning the buttons the way I would like. I have all of my buttons inside of a div which is already the width I want each row of buttons to be. My problem is that no matter how I try to do the margins or the buttons either have extra room on the right side and they don't line up with the right side of the viewport or they are too big and they overflow onto the next line. I'm sure there is a simple solution to this but I'm too much of a beginner to see it. :(
Currently my CSS for the button container and buttons is as follows:
#buttons {
width:525px;
margin-left: 25px;
margin-top: 10px;
}
button {
width: 110px;
height: 110px;
border: 2px solid black;
border-radius: 20px;
margin: 10px 0px 0px 0px;
}
Codepen here.
Try width: 33% on the buttons. It tells the browser to use (roughly) 1/3rd if the available space for each button.
Flex box is worth learning.
Changes are noted with /**/ in the CSS.
Full example, https://codepen.io/anon/pen/LOZEPp
CSS
body {
background-color: #141414;
font-family: 'Rubik', sans-serif;
display: flex; /**/
justify-content: center; /**/
padding: 0; /**/
margin: 0; /**/
}
#calc-main {
background-color: #607466;
width: 550px; /**/
height: 700px; /**/
border: 3px solid black;
border-radius: 20px;
display: flex; /**/
flex-direction: column; /**/
justify-content: space-around; /**/
}
#calc-brand {
flex: 1; /**/
background: yellow;
text-align: center;
padding: 0; /**/
margin: 10px; /**/
}
#calc-viewport {
flex: 1; /**/
margin: 10px; /**/
font-size: 2em;
background-color: #D4D2A5;
padding: 0.25em; /**/
text-align: right;
border: 2px solid black;
border-radius: 20px;
}
#buttons {
margin: 10px; /**/
flex: 16; /**/
background: orange; /**/
display: flex; /**/
flex-direction: column; /**/
align-items: center; /**/
padding: 5px; /**/
}
.button-row { /**/
flex: 1; /* important */
background: yellow;
width: 100%; /**/
margin: 5px; /**/
display: flex; /**/
flex-direction: row; /**/
justify-content: space-between; /**/
}
button {
flex: 1; /* important */
max-width: 110px; /**/
max-height: 110px; /**/
border: 2px solid black;
border-radius: 20px;
margin: 10px; /**/
}
HTML
<body>
<div id='calc-main'>
<h1 id='calc-brand'>JAVASCRIPT CALCULATOR</h1>
<div id='calc-viewport'>
<p id='main-output'>0</p>
<p id='secondary-output'>0</p>
</div>
<div id=buttons>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
<div class="button-row">
<button type='button' class='button-danger'>AC</button>
<button type='button' class='button-danger'>CE</button>
<button type='button' class='button-danger'>CE</button>
<button type='button'>÷</button>
</div>
</div>
</div>
</body>
Try This:
.wrapper {
border: 1px solid #000;
text-align: center;
display: inline-block;
background-color: #607466;
}
.result {
margin:10px 20px;
}
input {
height: 20px;
border: 1px solid;
outline: none;
width: 100%;
background: yellow;
}
span {
background: #AAA;
width: 60px;
height: 60px;
display: inline-block;
margin: 0 20px 10px 10px;
line-height: 60px;
float: left;
cursor: pointer;
background: #FFF;
border: 1px solid;
}
span:hover {
background-color: #AAA;
}
.result ~ p {
padding-left: 10px;
clear: both;
}
<div class="wrapper">
<p class="result"><input type="text" name="result"></p>
<p><span>AC</span><span>CE</span><span>/</span><span>*</span></p>
<p><span>7</span><span>8</span><span>9</span><span>-</span></p>
<p><span>4</span><span>5</span><span>6</span><span>+</span></p>
<p><span>1</span><span>2</span><span>3</span><span>=</span></p>
<p><span>0</span><span>.</span><span>Invisible</span></p>
<br style="clear: both">
</div>
If I didn't make parent container be inline-block style
The inner arrow will be aligned in the center position which is I expected.
However, there will be a line-break for the following text.
If I make the parent container be inline-block style
HTML
<div class="queue-view-entry-line" name="Name">
<div class="mycompany-document" style="/* display: inline-block; */">
<div class="arrow-right">
</div>
</div>
<span class="entry-label">File Name</span><span class="entry-value">Planned Payment Dates 2017
</span>
</div>
CSS rules
div{
.mycompany-document{
background: #F7F7F7;
border: 1px solid #AAAAAA;
left: 64px;
top: 64px;
width: 32px;
height: 32px;
vertical-align: middle;
border-radius: 5px;
letter-spacing: 1px;
text-align: center;
display: table-cell;
.arrow-right{
margin: auto;
vertical-align: middle;
display:inline-block;
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
}
}
}
I recommend you give flexbox a try. It will quickly be your best friend!
I didn't feel like wrestling with your HTML, so I created a new example to show how you could achieve the desired effect.
Check out this fiddle.
https://jsfiddle.net/omucfbzh/
<div class="box">
<h2>Documents</h2>
<div class="others">
<div class="arrow-container">
<div> > </div>
</div>
<p>Planned Payment Dates 2017</p>
</div>
</div>
.box {
background-color: orange;
display: flex;
flex-direction: column;
padding: 7.5px;
}
.others {
display: flex;
}
.arrow-container {
background-color: grey;
border-radius: 5px;
height: 50px;
width: 50px;
margin-right: 5px;
display: flex;
align-items: center;
justify-content: center;
}