Force resizement when reading text from file

Question

The duplicate suggested is the question where I got the basis for this question, so it is not a duplicate! As a matter of fact, I already have linked to that question from the start...

---

GOOD EDIT:

I made a JSFiddle ( my first time :) ). Notice how the textarea does not expand as one would wish. Type something inside the textarea and it will get resized immediately.

If we can automatically send a keypress event, it may work... (this relevant question did not help, the answers had no effect).

---

I am using the textarea as is from here. Then, I read from a file and I am putting the content inside the textbox, but it doesn't get resized as it should.

I update the textbox like this:

function updateTextbox(text) {
  $('#cagetextbox').val(text);
};

Any ideas?

I am on firefox 34.0 canonical, at Ubuntu 12.04, if that plays some role, which I hope is not the case, since some of my users use Chrome.

---

EDIT:

An attempt would be to write something like this:

$('#cagetextbox').attr("rows", how many rows does the new text contain);

Note that if we try to find out how many lines of text the textarea contains, we will get 1 as an answer.

---

EDIT_2

Maybe something like width/(length_of_line * font_size). For a few tests, it seems to be correct, if I subtracted 1 (by keeping only the integer part of the result of course).

Answer 1

Your textArea didn't update the height itself even when you trigger the 'input.textarea' on it because this value is undefined:

this.baseScrollHeight

It's only defined after a 'focus' on the textarea.

I have modified your code a little bit: http://jsfiddle.net/n1c41ejb/4/

so, on 'input'

    $(document).on('input.textarea', '.autoExpand', function(){
        var minRows = this.getAttribute('data-min-rows')|0,
            rows;
        this.rows = minRows;
        this.baseScrollHeight = this.baseScrollHeight | calcBaseScrollHeight(this);
        rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 16);
        this.rows = minRows + rows;
    });

and move the baseScrollHeight calculation to a separate function

function calcBaseScrollHeight(textArea) {
    var savedValue = textArea.value,
        baseScrollHeight;
    textArea.value = '';
    baseScrollHeight = textArea.scrollHeight;
    textArea.value = savedValue;
    return baseScrollHeight;
}

then call your updateTextBox like this:

$('#cagetextbox').val(text).trigger('input.textarea');

Answer 2

You can use the following code to adjust the height of an element, in your case a textarea. While it does use a loop, it avoids several display and scrolling problems that way.

function autoheight(a) {
    if (!$(a).prop('scrollTop')) {
        do {
            var b = $(a).prop('scrollHeight');
            var h = $(a).height();
            $(a).height(h - 5);
        }
        while (b && (b != $(a).prop('scrollHeight')));
    };
    $(a).height($(a).prop('scrollHeight'));
}

Resize on any events you like.

$("#cagetextbox").on("keyup change", function (e) {
    autoheight(this);
});

And/or when events are not triggered automatically call it yourself.

function updateTextbox(text) {
    $('#cagetextbox').val(text);
    autoheight($("#cagetextbox"));
};

Fiddle