6

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:

Screen vs Print

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

Community
  • 1
  • 1
L84
  • 45,514
  • 58
  • 177
  • 257
  • 2
    Not a fully CSS only solution, but you could use a hidden `
    ` to hold a duplicate version of input (sync by JS), and use CSS to hide the `
     – Passerby Feb 24 '14 at 04:20
  • @Passerby - I came across that idea after posting this question. It is one to consider, though as you say, may be unnecessary overhead. – L84 Feb 24 '14 at 04:23
  • 1
    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` – Kheema Pandey Feb 24 '14 at 04:55

2 Answers2

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();
}
rudminda
  • 137
  • 12
  • 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. – Mark Roberts Feb 03 '21 at 13:16
-1

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.
UdayKiran Pulipati
  • 6,579
  • 7
  • 67
  • 92
  • 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. – Cyberknight Jan 18 '23 at 04:42