Printing Textarea Text - Full Length (Height)?

Question

I have a webform my client wants users to be able to print out. It works fine with a little styling using CSS, however, I have several textaear fields. If a user types more than the height of the textarea the type is cutoff when printed.

I have tried textarea{height:100%;} and textarea{height:auto;} in the print stylesheet but neither of those works.

Is there a way to resize the textarea field to the size of the text for the print only version? I would prefer a CSS solution if possible that I can insert into my print stylesheet. If this isn't possible javascript solution would work.

Screenshot Comparison:

Note: If I cannot affect just the print version I can considered using JS to auto-resize the textarea field as someone is typing.

Names

Not a fully CSS only solution, but you could use a hidden <div> to hold a duplicate version of input (sync by JS), and use CSS to hide the <textarea> and show the <div> when print. This does sound like some meaningless overhead, but if the form is printed often I think it's OK. – Inveigh

@Inveigh - I came across that idea after posting this question. It is one to consider, though as you say, may be unnecessary overhead. – Names

Same type of question has been already asked by someone.. you might take a look at this solution. http://stackoverflow.com/questions/4435906/print-when-textarea-has-overflow – Phan

Answer 1

This worked for me (adapted from this JS and this jQuery):

function resizeAndPrint() {   
    var _print = window.print;
    window.print = function() {
        $('textarea').each(function() {
            $(this).height($(this).prop('scrollHeight'));
        });
        _print();
    }
    window.print();
}

Xylography

This answer may not always work as expected. The printout may use different widths and font sizes, while resizeAndPrint() will only take the screen display into account. See the note by Passerby and question number 4435906 for a working solution. – Heirdom

Answer 2

Don't use a textarea. It's a pity that, among other missed opportunities to fix niggles, an auto-resize attribute wasn't added in HTML5. Instead, use an editable span element, because it will naturally resize itself. A javascript function echos the content of the span to an actual input so it can be submitted in a form.

This works (PHP but you can adjust to suit):

<span contenteditable id="MyValue_span" style="display: inline-block; width: 35vw; white-space: pre-wrap;" name="MyValue_span" oninput="updateMyValue();" ><?php echo $MyValue; ?></span>
            <input type="hidden" id="MyValue" name="MyValue" value="<?php echo $MyValue; ?>" />

The javascript function:

function updateMyValue() 
{   
    var myvalue_span = document.getElementById("MyValue_span").innerText;
    document.getElementById("MyValue").value = myvalue_span;
}

Lepanto

Answer 3

This problem exist in firefox browser.

Please open the html file in chrome browser for printing text between textarea tags. There is no need apply style and script for printing large text of textarea.

Steps to follow:

1. open HTML file in chrome browser.
2. Click Ctrl + P.
3. Click on Save button ( Select PDF format ).
4. Open PDF file ( See all text between textarea whether it is moves to second page if excess text contains)
5. Click Print button.

Hunsaker

Chrome trimmed the textareas just like Firefox when printing to PDF at work. Worse yet, Chrome printed everything as image, creating a huge 40 MB PDF out of less than 40 pages of form, so, about 1 MB per page (and that cannot be searched, indexed etc.) Firefox also does that some times, mainly when the Page uses custom fonts (disabling custom font usage usually solves the problem, though not always). I couldn't find a way to force Chrome to print text as text and not everything as image whenever it finds a slightly more complexly decorated Page. – Morville