Show Textarea Full Text in Print

Question

Taaarde Galera,

I have a question, where at the time of the print my textarea does not show the full text.

I wonder if you could help me show him?

Example of how this:

Answer 1

Luciano we go by parts. First use the @media print { } to put the styles that will only appear when you are in print mode. Then enable Chrome Developer Tools to view this CSS as shown below.

Now you can see on your screen a preview of how your screen will look in print.

Now let’s go to the code. Even setting overflow: visible !important; your text area will not expand in printing. NOTE: but if it is a DIV and not a TEXTAREA this will work! I’ll put the code just so you understand better the rest of the explanation.

div {
    overflow: auto;
    height: 80px;
    width: 80px;
}
@media print {
    div {
        overflow: visible;
    }
}
<div>
    11111
    33333
    44444
    55555
    66666
    77777
    22222
</div>

Now if you want to keep with a textarea the solution I give you is as follows.

You’re gonna have a textarea as it is already on your site, but will also have a DIV hidden, with display: none In the @media print { } you’ll turn things around. you’ll give diplay:none in textarea and display:block in div that will get your text.

Now just missing the Script to take the content from one place and put in the other. In the example below you have everything you need.

function formNodes(str, node) {
    var arr  = str.split('\n'), i, span;
    for (i in arr) {
        span = document.createElement('span');
        span.appendChild(document.createTextNode(arr[i]));
        node.appendChild(span);
        node.appendChild(document.createElement('br'));
    }
    return node;
}
function updateDiv(id, str) {
    var div  = document.getElementById(id);
    var node = div.cloneNode(false);
    formNodes(str, node);
    document.body.replaceChild(node, div);
}
function initDiv() {
    var div = document.getElementById('hdiv');
    var elm = document.getElementById('ta');
    formNodes(elm.value, div);
}
window.onload = initDiv;

@media print {
    textarea.ta {
        display: none !important;
    }
    div.ta {
        display: block !important;
    }
}
@media screen {
    textarea.ta {
        display: block;
    }
    div.ta {
        display: none;
    }
}

<textarea id="ta" class="ta" rows="3" cols="10" onchange="updateDiv('hdiv', this.value);">
    11111
    22222
    33333
    44444
    55555
    66666
    77777
</textarea>
<div id="hdiv" class="ta"></div>