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

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, Jan 09 '17 at 15:32

Alvaro · Answer 1 · 2017-01-09T13:29:21.713

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

edited Jan 09 '17 at 13:29

answered Jan 09 '17 at 12:48

Alvaro

9,247
8
49
76

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? – NeedsHelp Jan 09 '17 at 13:07
@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. – Alvaro Jan 09 '17 at 13:23

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

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?

edited May 23 '17 at 12:13

Community

1
1

answered Jan 09 '17 at 15:55

Iurii Drozdov

1,685
1
12
23

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

2 Answers2