I want to automatically increase the textarea size when printing. I'm trying this way, but it's not increasing the size:
var linha = ``;
linha += `<textarea class="area2 dentro" rows="1" data-min-rows="1">Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste Teste </textarea>`;
$("#retorc6").html(linha);
document.getElementById("btnPrint1").onclick = function () {
printElement(document.getElementById("printThis1"));
}
function printElement(elem) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
console.log($printSection);
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}
@media screen {
#printSection {
display: none;
}
}
@media print {
body * {
visibility:hidden;
}
#printSection, #printSection * {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
textarea {
min-height: 900px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="btn btn-info show-side-btn escoprint" id="btnPrint1" data-show="show-side-navigation1" style="float:right;"><i class="fa fa-print" aria-hidden="true"></i></button>
<div id="printThis1" class="printThis1">
<form role="form" action="#!" id="retorc6">
</form>
</div>
But this way the size doesn't fit the text when printing. The objective is when printing to adjust the textarea to the size of the text. Can anyone help?