13

I created a number field which has the text inside aligned to the right.

UseCase:

If you select the full text or when you use your middle mouse button inside of the input field to scroll I noticed that it is possible to scroll the text for about 1px to the left. So far I could only provoke this behavior in Chrome.

You can see it in action with this code:

<input type="number" value="15" style="text-align: right;" />

Solution:

I could probably disable the scrolling on the element but I wanted to ask you if there is an elegant way to fix this.

Here you can see the code: http://codepen.io/anon/pen/mEmAvz

evaenrique
  • 981
  • 2
  • 8
  • 17
pluga
  • 131
  • 4
  • 2
    All I can do is confirm that this happens in Chromium as well, and exclusively, as far as I can tell. It appears to be simply a glitch with Chromium's implementation of the number increase/decrease buttons. I played with a few settings really quick, but no dice. – TheThirdMan Jun 30 '16 at 14:53
  • @makshh Thank you for your response! The person in this thread wanted to disable the change of the number which occured when the field is scrolled. I have just a visual problem in which the number is offset by a few Pixel when the text is selected / the middlemouse button is pushed. – pluga Jun 30 '16 at 15:11
  • And this happens only with `text-align: right`? – max Jun 30 '16 at 15:15
  • This is correct! And so far this only happens in chrome. – pluga Jun 30 '16 at 15:45
  • 2
    It happens too on `type=text`. Textarea is OK. – max Jun 30 '16 at 15:57
  • 1
    Since this is reproducible it seems appropriate to [report it as a bug](http://stackoverflow.com/questions/40703/where-can-i-find-and-submit-bug-reports-on-googles-chrome-browser). – Gerald Schneider Jul 01 '16 at 09:02
  • I can't seem to reproduce it on my chrome. Am I missing something here? – choz Jul 01 '16 at 09:13
  • 2
    I confirm the issue on Chrome 51.0.2704.103 (64-bit) – morels Jul 04 '16 at 12:34
  • 2
    I added an [issue (bug report)](https://bugs.chromium.org/p/chromium/issues/detail?id=625631) in the Chrome Issue Tracker, as @GeraldSchneider proposed. You can follow it with the [link](https://bugs.chromium.org/p/chromium/issues/detail?id=625631). – David Gourde Jul 04 '16 at 13:25
  • I can also reproduce the issue, the problem comes when aligning the text to the right, in my case using 51.0.2704.103 (64-bit) – Slico Jul 05 '16 at 10:09
  • Maybe it's a problem with the box model and you could try box-sizing:content-box; – Carol McKay Jul 06 '16 at 13:52

2 Answers2

1

You could use text-indent with calc. Like so:

html {
 box-sizing: border-box;
}

*, *:before, *:after {
 box-sizing: inherit;
}

input {
  width: 100%;
  text-indent: calc(100% - 1.5em);
  font-size: 1em;
}

https://jsfiddle.net/VilleKoo/u2ead3gz/1/

VilleKoo
  • 2,827
  • 2
  • 14
  • 23
-2

I did not understand exactly what you want, but I think so
<input type="number" style="text-indent: calc(100% - 1.5em);" />

Feras Al Sous
  • 11
  • 3