Print when textarea has overflow

Question

I have a form with some text areas that allow a scroll bar when the text exceeds the text box. The user would like to be able to print the screen, and this text is not visib

Answer 1

With the usage of pure CSS it is not possible to prepare the textarea for printing.

It is necessary to add some javacript magic to the text area or add a hidden field.

There are a couple of solutions, that have been mentioned here:

1. Hidden paragraph or div
2. Using Javascript to extent the size of the textarea

1. Hidden paragraph or div

HTML & CSS:

<textarea>Sample Text</textarea>
<div class="hidden-div">Sample Text</div>

<style>
  .hidden-div{display: none;}
  @media print{
    .hidden-div{display:block;}
  }
</style>

2. Javascript

You could use a js library e.g https://github.com/thomasjo/jquery-autoresize

$(function() {
    $("textarea").autoResize()
})

Answer 2

Adding onto Alan's answer above, if you have multiple instances of this problem on the same page, then you can use data-* attributes to handle all at once. Sample:

var $printOnlyArr = $('.print-only');
for (var i = 0; i < $printOnlyArr.length; i++) {
  var $printOnly = $($printOnlyArr[i]);
	var textSource = $printOnly.data('textsource');
	if (textSource) {
	  $printOnly.text($("#" + textSource).val());
	}
}

.print-only {
	display: none;
}

@media print {
	.print-only {
		display: block;
	}
	.no-print {
		display: none;
	}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="form-control no-print" maxlength="2000" id="txtAdditionalComments"></textarea>
<div class="print-only" data-textsource="txtAdditionalComments"></div>

Answer 3

Just encourter the problem recently too. Thanks for Alan H's posts. It works perfect with Chrome and Safari. However, with IE and Firefox, the issue is that the last several pages(page elements after textarea) will be missing from printing(FF), missing pages and overlapped layout(IE9).

Another finding that will be helpful to solve the issue is, you can set textarea's rows properties correctly as the control's height says to make it work with CSS overflow:visable stuff. All browsers seems to respect the rows property while printing.

Answer 4

Define a separate CSS for print media like this <link rel="stylesheet" href="print.css" type="text/css" media="print" /> and for the text area, define the overflow attribute as

overflow: visible;

Answer 5

I had this same problem. My project is React, I was a semnaticUi TextArea component. The Text that could only be seen by scrolling down in the Textarea aka the "overflow" could not be seen in the print view when I press the print screen button.

Solution :)

I just used a normal paragraph tag instead and set css white-space: pre-wrap on a div that enclosed the p tag.

Worked for me!