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.

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();
}

Answer 2

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.