As stated at :

If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the scrollWidth and scrollHeight properties.

So, I am using the scrollWidth and scrollHeight properties to resize the element to its actual size (jsfiddle).

HTML:

<textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea modo consequat.</textarea>

JavaScript:

(function ($) {
    $(document).ready(function () {
        $('textarea').css({ 
            width: $('textarea')[0].scrollWidth, 
            height: $('textarea')[0].scrollHeight 
        });
    });
})(jQuery);

I would assume that if I set the dimensions to the actual size of the content the element would have no scrollbars as its dimensions would be large enough for the content to not overflow. Right? So it should be the way you see in this image: .png

But it doesn't work properly as you can see from the following images:

IE: .png

Chrome: .png

Opera: .png

My question is what is wrong with the scrollWidth and scrollHeight properties? They give me invalid dimensions!

As stated at https://developer.mozilla/en/Determining_the_dimensions_of_elements:

If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the scrollWidth and scrollHeight properties.

So, I am using the scrollWidth and scrollHeight properties to resize the element to its actual size (jsfiddle).

HTML:

<textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea modo consequat.</textarea>

JavaScript:

(function ($) {
    $(document).ready(function () {
        $('textarea').css({ 
            width: $('textarea')[0].scrollWidth, 
            height: $('textarea')[0].scrollHeight 
        });
    });
})(jQuery);

I would assume that if I set the dimensions to the actual size of the content the element would have no scrollbars as its dimensions would be large enough for the content to not overflow. Right? So it should be the way you see in this image: https://i.sstatic/lKxoz.png

But it doesn't work properly as you can see from the following images:

IE: https://i.sstatic/JXt0e.png

Chrome: https://i.sstatic/emGyG.png

Opera: https://i.sstatic/7MAX5.png

My question is what is wrong with the scrollWidth and scrollHeight properties? They give me invalid dimensions!

• javascript
• html

2 Answers 2

The problem is that you're not including the size of the scrollbars. Try setting "overflow" to "hidden" or adding the size of the scrollbars and it works. There are ways to calculate that size, Google will help you. For testing purposes use Chrome on Windows and 17px.
Depending on the context you're using this snippet you might need to reset the size whenever the content changes. You should also give the textarea a fixed width, else the browser will assign whatever it feels like.

(function ($) {
    $(document).ready(function () {
        $('textarea').css({
            width: $('textarea')[0].scrollWidth+'px',
            height: $('textarea')[0].scrollHeight+'px',
            overflow: 'hidden'
        });
    });
})(jQuery);

I feel You took it very plex! There is an scrollHeight and and scrollWidth property that equals to width and height of what is inside an scrollable element. So setting height and width of that element to scrollWidth and scrollHeight can solve the problem.

var textarea = document.getElementsByTagName('textarea')[0];
textarea.style.height = textarea.scrollHeight + 'px';
textarea.style.width = texyarea.scrollWidth + 'px';

Look at fiddle here