0

When the textarea extends beyond the allocated rows, the scroll bar is visible and cuts into the text space so less text can now fit in. Is it possible to allocate that space so when the scroll bar is visible the text remains exactly as is.

Similar to:

preventing text from reaching the right side of the textarea, reserving space for vertical scroll bar, which will not move the text when appears

Just hoping for a more modern, non-jquery soluion.

user1380431
  • 57
  • 1
  • 7
  • The simplest thing to do is to set the textarea to `overflow-y: scroll;` so there's always a scrollbar. It just won't be active if there's not enough text. – hungerstar Jan 30 '18 at 21:40
  • Thanks, that's what I currently have... trying to find a more visually pleasing solution I suppose. – user1380431 Jan 30 '18 at 21:42
  • Have you tried any of these? https://stackoverflow.com/questions/13054797/how-to-prevent-a-webkit-scrollbar-from-pushing-over-the-contents-of-a-div – hungerstar Jan 30 '18 at 21:49

1 Answers1

0

Try adding padding on the side where scrollbar is running into text. 

padding-right: 30px;
StangSpree
  • 421
  • 1
  • 5
  • 22
  • It doesn't work. try in your fiddle.. if you are typing into the area, when you reach the stage when a scroll bar is needed, you will see it added on top of the 30px padding. – user1380431 Jan 30 '18 at 21:43
  • @StangSpree, the text still shifts left/right, here's your [JSFiddle](https://jsfiddle.net/h2t0sfp4/1/) that has a text toggle to illustrate. – hungerstar Jan 30 '18 at 21:47