I am working on the calculator app. Presently stuck in placing the key. Here is my progress so far,
My problem is I had to create two “.” buttons to place my equal button in larger size. Now as you can see the one “.” button is overflown by the “=” button. I used a simple div with adjusted margin and padding. Could you please suggest something better so that I can get rid of this overflowing problem.
I am still working on my code so if you give some feedback it would be great.
Hey @scodek,
I would try to separate the last row of buttons to a different div and position them accordingly. That way, the equal button won’t hide another button. Worst case, just make the equal button that same size as every other button.
Thank you for your reply. I will try this. However, I want to make the equal button bigger as two button size and fitting a separate div is getting difficult there. Still thanks for your suggestion.
Trying to take a look at this… I think you mean you had to make two ‘+’ buttons, not ‘.’ buttons, correct ?
Also, just so you know you know you should not have to do this/could cause aberrant behavior in the app. Just wanted to make sure I understood you correctly first.
Basically I removed the extra ‘.’ button, pushed the remaining buttons down in the html tag via ‘p’ tags, adjusted the inline positioning of the equals button on the left side and then adjusted the properties in CSS of how far ‘down’ the ‘p’ tag goes…
I understand adjusting the entire ‘p’ like this generally would not be ideal-- You’d want a custom tag to do something similar, but hopefully this will provide you with a better idea of the issues you were struggling with.
Thank you for your help … I really appreciate. Yes, this is exactly what I wanted look-wise. However, I also solved it a little bit differently than you. I created a separate div for the last column containing the “=” . Here is the solution,
I though this way, as this allows me separation between my operator buttons and operand buttons and that makes me flexible to add more buttons.
However, thank you for a different solution. Thanks much.
@scodek – Yes, your way is better-- You don’t want to affect an entire class if not needed, but the concept that the line needed to be ‘escaped’ (or the ‘pattern broken’) with a special div as treatment is essential. Glad we could help one another out.
Thank you for this debug !! Actually I am developing the code in different editor (komodo edit) and pasted the code in codepen to share in the forum… In my editor I made these changes already and my equal button gives the correct button pressing animation. Thanks for this. I will change in codepen too.