scrollWidth/scrollHeight give invalid dimensions

Question

As stated at https://developer.mozilla.org/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 commodo 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: i.stack.imgur.com/lKxoz.png

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

IE: i.stack.imgur.com/JXt0e.png

Chrome: i.stack.imgur.com/emGyG.png

Opera: i.stack.imgur.com/7MAX5.png

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

score 6 · Answer 1 · edited Aug 29 '12 at 08:21

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);

score 1 · Answer 2 · answered Sep 10 '11 at 06:05

1

I feel You took it very complex! 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

answered Sep 10 '11 at 06:05

Mohsen

64,437
34
159
186

Excuse me, what do you mean by "very complex"? And it still doesn't work properly in your jsfiddle. Here's how yours works in Chrome i.stack.imgur.com/9Iqh0.png and here's how yours works in Opera i.stack.imgur.com/9aTT8.png – Jack Sep 10 '11 at 06:21
you want to "resize the element to its actual size" and it does... what you want then? – Mohsen Sep 10 '11 at 06:35
Actually it doesn't. Have a look at the screenshots I posted. Your suggested code is the same as mine except yours doesn't use jQuery (I think that is what you meant by "very complex", didn't you?) and yours has a mistype, just FYI: it should be "textarea" instead of "texyarea". – Jack Sep 10 '11 at 06:41
And if you don't understand what I want, I want to resize a textarea so the text fits inside it without using scrollbars. – Jack Sep 10 '11 at 06:44
If you can see I even posted a link to the result I want: i.stack.imgur.com/lKxoz.png – Jack Sep 10 '11 at 06:47

scrollWidth/scrollHeight give invalid dimensions

2 Answers2

Linked