I’ve got a sort of a display bug in my JS Calculator: http://codepen.io/AbdiViklas/pen/GjdrZQ?editors=0010 .
When entering a decimal following another numeral, I’m using $("#display").append(".");. The result is a big space before the dot, as if the dot character is monospaced like other characters and taking up just as much room. But when a decimal result is returned from an equation, or when starting an entry with “0.”…, which uses the line $("#display").text("0."); (as part of an if statement so that, if entering a decimal immediately after an operator, a new entry is started instead of appending to the existing value), the decimal renders as I would prefer, nice and compact against the preceding digit.
It would seem this doesn’t have to do with the font (as a “x.x” string renders correctly). Is it a CSS issue? JS/jQuery? (.append vs .text?)
I’m not able to reproduce the behavior. The decimal looks normal to me. (Chrome, Windows)
You’re getting line-breaks before the dot you append, which causes the weird spacing.
You can see that if you append a dot so you get the “bad” behaviour, and then inspect the elemnts with your console, you’ll see that they are on different rows.
Try playing with the solution found here:
2 Likes
+1 to heennkkee, the unusual thing is actually that you are not getting that spacing on every character.
been a while since i’ve used jQuery but I believe a cleaner solution for your case than that stack overflow answer would be:
var str = $('#display').text(); //get display contents
str+='.'; //append
$('#display').text(str); //replace
1 Like
Yeah, I think I’m going to have to go with that, because .after seems to be putting the dot “after” the entire element. Many thanks to you both!