Javascript - How to manually decrease textarea height in Chrome when height is set in code?

Question

I have a textarea in a form that users frequently use. When a user manually adjusts the size of the textarea using the resize thing in the bottom-right corner of the textarea, I save the height to localStorage. I want to set the textarea height to the height saved in localStorage but when I do the textarea can't be resized smaller than the height that was set.

It works fine in Firefox but not in Chrome.

I'm currently setting the height using jQuery's .height(). I've also tried .outerHeight(), .css(), .style, .setProperty(). None worked.

Code I'm working with:

 id = params.id ? params.id : $el.attr('id');
 lsHeight = localStorage.getItem('textareaOuterHeight-' + id);
 if (lsHeight != null) {
 $el.height(lsHeight);
 }
 $el.data('defaultOuterHeight', $el.outerHeight());
 $el.on('click', function() {
 if ($el.data('defaultOuterHeight') !== $el.outerHeight()) {
 localStorage.setItem('textareaOuterHeight-' + id, $el.outerHeight());
 }
 });

• Iurii Drozdov: Can you provide some code you use?
• NeedsHelp: @IuriiDrozdov Code added.
• Iurii Drozdov: Please take a look jsfiddle.net/pL4shps0
• NeedsHelp: I tried the jsfiddle and it's behaving the way I described. I can't resize the textarea to a size smaller than the height set.
• NeedsHelp: Also, my problem is that it doesn't work on Chrome.

Answer 1

It seems to work correctly for me:

$('textarea').height(20);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<textarea name="" id="" cols="50" rows="50"></textarea>

Instead of saving+modifying the height of the textarea with the height CSS value, you could try to modify the number of columns or rows:

$('textarea').attr('rows',60);

• NeedsHelp: I tried this but increasing the size of the textarea by dragging the bottom right corner of it doesn't seem to increase the number of rows. Unless Im missing something?
• Alvaro: @NeedsHelp You are right, it changes the height and width. My proposal would need to figure out how to adapt the height to number of rows to be saved. In case you don't find a way to actually apply the height.

Answer 2

It is a Chrome bug which is still open https://bugs.chromium.org/p/chromium/issues/detail?id=94583

You can use workaround from here jsfiddle.net/nz8ut/2/

And you can take a look at this question Custom CSS to allow chrome textarea resize smaller than initial state?