Here I put the code I'm trying to make the textarea adjust the size dynamically when opening the modal.
$(document)
.on('keyup input keypress keydown change', '.area1', function(e) {
var tamanhoMin1 = $(this).attr('rows') * $(this).css('line-height').replace(/[^0-9\.]+/g, '');
$(this)
.css({'height': 'auto'});
var novoTamanho1 = this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"));
if (tamanhoMin1 > novoTamanho1) novoTamanho1 = tamanhoMin1;
$(this).css({'height': novoTamanho1});
});
$(".area1")
.delay(0)
.show(0, function() {
var el1 = $(this);
setTimeout(function () {
el1.trigger('keyup');
}, 100);
});
.area1{
display: none;
overflow: hidden;
resize: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary edit_faq" data-toggle="modal" data-target="#add_data_Modal1" style="float: right; margin-left: 1%;">Alterar Procedimento</button>
<div class="modal fade" id="add_data_Modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close atualizar" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" method="post" id="faqq1" class="faqq1">
<div class="card">
<div class="card-header contact-header">
<h2 class="text-center">ALTERAR PROCEDIMENTO</h2>
</div>
<div class="card-body m- contact-body">
<div class="form-group mb-0">
<label for="Procedimento1">Procedimento</label>
<textarea class="form-control area1" name="Procedimento1" id="Procedimento1" rows="2"> Até pouco tempo atrás todos acreditavam que o Universo era infinito (inclusive a classe científica), nas escolas tal ideia era ensinada nas aulas de geografia, ciências, física entre outras disciplinas afins. O avanço das tecnologias e das próprias técnicas de observação do espaço sideral, acrescido de muito estudo, conduziu a física moderna a derivar outra conclusão sobre o questionamento acerca da extensão do Universo, doravante a esse processo, os físicos criaram um método para calcular o volume cúbico e chegaram ao número que é expresso da seguinte forma: o algarismo 3 e mais 72 zeros.</textarea> </div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
As you can see in the example I put, the textarea doesn't adjust automatically. To auto adjust, I have to click inside the textarea and hit enter on the keyboard.
Can you help to solve this problem?