• Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard
CSEstack

What do you want to Learn Today?

  • Programming
    • Tutorial- C/C++
    • Tutorial- Django
    • Tutorial- Git
    • Tutorial- HTML & CSS
    • Tutorial- Java
    • Tutorial- MySQL
    • Tutorial- Python
    • Competitive Coding Challenges
  • CSE Subject
    • (CD) Compiler Design
    • (CN) Computer Network
    • (COA) Computer Organization & Architecture
    • (DBMS) Database Management System
    • (DS) Data Structure
    • (OS) Operating System
    • (ToA) Theory of Automata
    • (WT) Web Technology
  • Interview Questions
    • Interview Questions- Company Wise
    • Interview Questions- Coding Round
    • Interview Questions- Python
    • Interview Questions- REST API
    • Interview Questions- Web Scraping
    • Interview Questions- HR Round
    • Aptitude Preparation Guide
  • GATE 2022
  • Linux
  • Trend
    • Full Stack Development
    • Artificial Intelligence (AI)
    • BigData
    • Cloud Computing
    • Machine Learning (ML)
  • Write for Us
    • Submit Article
    • Submit Source Code or Program
    • Share Your Interview Experience
  • Tools
    • IDE
    • CV Builder
    • Other Tools …
  • Jobs

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

Aniruddha Chaudhari/2154/2
CodeHTML & CSS

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.

textarea in HTML form

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.

Python Interview Questions eBook

JavaScript
Aniruddha Chaudhari
I am complete Python Nut, love Linux and vim as an editor. I hold a Master of Computer Science from NIT Trichy. I dabble in C/C++, Java too. I keep sharing my coding knowledge and my own experience on CSEstack.org portal.

Your name can also be listed here. Got a tip? Submit it here to become an CSEstack author.

Comments

  • Reply
    Bam
    February 20, 2022 at 3:02 am

    This is looking good. Thanks!

    • Reply
      Aniruddha Chaudhari
      February 22, 2022 at 4:09 pm

      You’re welcome!

Leave a Reply Cancel reply

HTML CSS & JavaScript

  • HTML- First Program
  • HTML- Basic Tags
  • HTML- Adding CSS
  • HTML- Best Form Design Practices
  • HTML- Text Indent using CSS
  • HTML- Drop Cap using CSS
  • HTML- Add Favicon
  • HTML- Adding ToC on Website
  • HTML- Save Page as PDF
  • CSS- 17 Tips for Optimizing CSS
  • CSS- Adding Image Shadow
  • Show/Hide Password on Login Form
  • Pass Data to Another Web Page [JS]
  • Horizontal Scrolling on Mobile Web

HTML Editing Tools

  • HTML- Online Editor
  • HTML- Novi Builder

© 2022 – CSEstack.org. All Rights Reserved.

  • Home
  • Subscribe
  • Contribute Us
    • Share Your Interview Experience
  • Contact Us
  • About
    • About CSEstack
    • Campus Ambassador
  • Forum & Discus
  • Tools for Geek
  • LeaderBoard