The autosize plugin is not working correctly. How to fix?

Hello! Please help solve the problem.

I have a modal window with the editing form. Data in the form loaded via AJAX. Use bootstrap 3.3.7. The form has two tabs (tabs). In each tab there is an element <textarea></code> to which is applied the plugin <a href="https://github.com/jackmoore/autosize" rel="nofollow" target="_blank">autosize</a>.<br><br> The problem is the following. When you open a modal window with form editing in a textarea is a long text, but the textarea is not making the desired height. Need anything to enter, only then the plugin makes. How to fix the problem? I want to know your opinions about it.<br><br> Code laid out in <a href="https://jsfiddle.net/NogerbekNurzhan/aob92e8u/" rel="nofollow" target="_blank">jsfiddle.net</a>.<br><br><b>HTML</b>:<br><pre><code class="html"><!DOCTYPE html> <html lang="en"> the <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3rydg4va+PmSTsz/K68vbdEjh4u" by adding crossorigin="anonymous"> </head> the <body> <div class="dashboard-wrapper"> <div id="dashboard-content"> <div class="modal fade"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <form method="post" action=""> <div class="modal-body"> <ul class="nav nav-tabs nav-justified"> <li class="active"><a class="tabnav" data-toggle="tab" href="#TabFirst">FIRST</a></li> the <li><a class="tabnav" data-toggle="tab" href="#TabSecond">SECOND</a></li> </ul> <div class="tab-content"> <div id="TabFisrt" class="tab-pane fade in active"> <div class="form-group"> <label for="first_body">First Description</label> <div class="textarea-wrapper"> <textarea name="body" class="form-control" id="first_body"></textarea> <i class="fa fa-arrows textarea-icon" aria-hidden="true"></i> <div id="TabSecond" class="tab-pane fade in active"> <div class="form-group"> <label for="second_body">Second Description</label> <div class="textarea-wrapper"> <textarea name="body" class="form-control" id="second_body"></textarea> <i class="fa fa-arrows textarea-icon" aria-hidden="true"></i> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUpncja7l2mcwnipg9mgcd8wgnicpd7txa" by adding crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.0/autosize.js"></script>

JS:
autosize(document.querySelectorAll('#first_body'));
autosize(document.querySelectorAll('#second_body'));
June 14th 19 at 18:49
0 answer

Find more questions by tags JavaScriptjQuery