Why if open popup, theTextarea is less than the text in it?

Question

I have text area:

function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (25 + o.scrollHeight) + "px";
}

textarea#commentText {
        height: auto;
        width: 570px!important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<textarea name="bookId" id="commentText" value="" class="form-control" ng-maxlength="1000" maxlength="1000" rows="3" onkeyup="textAreaAdjust(this)" style="overflow:hidden"></textarea>

And if i open popup window, I get such a result:

How do I make the required textarea size when I open it? I specified the auto size in css but nothing happened.

Possible duplicate of [It is possible to expand a textarea only with CSS?](https://stackoverflow.com/questions/15865982/it-is-possible-to-expand-a-textarea-only-with-css) — Ayo K, Nov 14 '17 at 09:36
No, textarea { resize: both; } not work for me, and can not be replaced with a div in my case — Дмитрий, Nov 14 '17 at 09:40

score 1 · Answer 1 · answered Nov 14 '17 at 09:45

You can just run the function on document ready too:

function textAreaAdjust(o) {
  o.style.height = "1px";
  o.style.height = (25 + o.scrollHeight) + "px";
}

// this will run on first load
(function() {
   textAreaAdjust(document.getElementById('commentText'));
})();

textarea#commentText {
  height: auto;
  width: 570px!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<textarea name="bookId" id="commentText" value="" class="form-control" ng-maxlength="1000" maxlength="1000" rows="3" onkeyup="textAreaAdjust(this)" style="overflow:hidden">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius lorem sed metus lacinia, et tempor odio posuere. Cras dictum, odio et tristique iaculis, tellus tortor molestie sapien, at pharetra quam quam in enim. Nunc placerat quam vitae elit maximus ornare. Aenean dapibus, purus a tincidunt fermentum, diam est aliquam orci, eu laoreet nulla est sed leo. Ut laoreet facilisis feugiat. Mauris tortor tortor, iaculis ut mi sit amet, consectetur gravida sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer sed fermentum turpis. Cras ac libero at augue rutrum sagittis sit amet vitae magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras at odio odio. Cras porttitor sit amet odio eu imperdiet. Vestibulum dignissim tempus rutrum.</textarea>

score 0 · Answer 2 · answered Nov 14 '17 at 10:43

Here use this. Instead of using onkeyup use onfocus on textarea. And manually trigger the focus when you open the popup using javascript. Previously it was only working only when the keyup event was triggered.

document.getElementById("commentText").value = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";

function textAreaAdjust(o) {
    o.style.height = "1px";
    o.style.height = (25 + o.scrollHeight) + "px";
}

document.getElementById("commentText").focus();

textarea#commentText {
        height: auto;
        width: 570px!important;
 }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<textarea name="bookId" id="commentText" value="" class="form-control" ng-maxlength="1000" maxlength="1000" rows="3" onfocus="textAreaAdjust(this)" style="overflow:hidden"></textarea>

Why if open popup, theTextarea is less than the text in it?

2 Answers2