Question

In a voting system I have a line that gives a score as follows:

<span>Score: <span id="numberOfVotes">{$numberOfVotes}</span></span>

Every time a user votes, clicks Next or chooses another item the score is updated. During this update, the “0” is replaced with a loading animation that is 16×16 pixels.

How can I avoid text shifting when the innerHtml of #numberOfVotes is temporarily swapped around with the loading animation?

Answer 1

Try setting span to display:inline-block; and giving it height and width to contain that image… maybe 16px each or greater. Untested!