1

I'd like to use one-line textarea (with rows=1 and overflow-x:hidden;) but for now I have a problem: unlike input type="text", when it is overflown horizontally, the content is scrolled with "jumps" when we continue typing inside it:

enter image description here

which is not nice for typing workflow (see also a fiddle). Is there some simple way to fix this (ideally with just CSS), or the only way is to set an on('input',..) handler, check if we reached the end of the line inside it by some pesky pixel calculation and then set horizontal scroll position of the textarea?

YakovL
  • 7,557
  • 12
  • 62
  • 102

1 Answers1

1

This is easily achieved by using the white-space css attribute:

white-space: nowrap;
overflow-x: hidden; /* don't add this if you want a scrollbar to appear */
Mahmoud Al-Qudsi
  • 28,357
  • 12
  • 85
  • 125
  • 1
    Beatiful solution, great, thanks! How did you figure this?) – YakovL Mar 20 '19 at 07:35
  • The default behavior of `textarea` when it reaches the end of the line is to put text on the next line (when it's big enough). I figured it's doing the same thing, but you are only being shown the last line, which is why you see the text at the start of the input and nothing else that was previously entered -- presumably if everything were to stay on the same line, it'd behave the same way an `input` field does.. and it did! – Mahmoud Al-Qudsi Mar 20 '19 at 19:35