Remove Scrollbar in Textarea and Auto-adjust Height (Resizing)

Usually, the height and the width of the text area are set using the CSS attributes width and height with the values in pixels.

If the length of the content is bigger than the defined space for the textarea, scrolling gets enabled.

Do you want to disable scrolling or remove the horizontal or vertical scroll bar? You can do that using simple JavaScript and JQuery.

Textarea is one of the very useful HTML tags that is used to take the user input in the form of long text content or paragraphs.

<textarea>
    Some text...
</textarea>

Add this JavaScript to your HTML page to remove scrollbar in textarea and auto-adjusting height (resizing).

$('textarea').each(function () {
  this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
  }).on('input', function () {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
});

The script will be applied to all the textarea tags on the HTML page. If you want to apply this change only to the particular textarea (and not all), use id or class attribute.

This is how the textarea looks like.

How does it work?

This simple script calculates the height of the scrollable content and assigns that value to the actual height of the textaea. All this happens at the time of the page load so that the height is adjustable dynamically.

This is a simple JavaScript hack. So irrespective of the web technology you work like Boostrap, Java,… this script works.

Any doubt on how to remove scrollbar in textarea? Let me know in the comment section.

Aniruddha Chaudhari

I am a Python enthusiast who loves Linux and Vim. I hold a Master of Computer Science degree from NIT Trichy and have 10 years of experience in the IT industry, focusing on the Software Development Lifecycle from Requirements Gathering, Design, Development to Deployment. I have worked at IBM, Ericsson, and NetApp, and I share my knowledge on CSEstack.org.