Show Textarea Full Text in Print

Question

Show Textarea Full Text in Print

Navigation

#1 by (1 votes)

1

Taaarde Galera,

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

I wonder if they could help me show it?

Example of how it is:

css media-queries

asked by anonymous 22.11.2017 / 15:08

1 answer

How to use the "php_admin_value" flag in virtualhost through PHP-FPM in a specific Virtual Host? Why does the variable number return an empty string when it declares it out of a function

score 1 · Answer 1

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

Nowyoucanseeonyourscreenapreviewofhowyourscreenwilllookwhenprinted.

Nowlet'sgotothecode.Evensettingoverflow:visible!important;toyourtextareawillnotexpandinprint.NOTE:ButifitisaDIVandnotaTEXTAREAthiswillwork!Iwillputthecodejustsoyoucanbetterunderstandtherestoftheexplanation.

div{overflow:auto;height:80px;width:80px;}@mediaprint{div{overflow:visible;}}<div>11111333334444455555666667777722222</div>

NowifyouwanttokeepatextareathesolutionIgiveyouisthefollowingone.

Youwillhaveatextareaasitalreadyisonyoursite,butitwillalsohaveaDIVhidden,withdisplay:noneIn%%ofyouwillreversethings.Youwillgive@mediaprint{}indiplay:noneandtextareaindisplay:blockthatwillhaveyourtext.

NowallyouneedistheScripttograbthecontentsofoneplaceandputthemintheother.Intheexamplebelowyouhaveeverythingyouneed.

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>