Tutorial :HTML/CSS - Very tall <textarea> disappears off A4 page when printing


I have a problem where a very tall <textarea></textarea> control doesn't fit on an A4 page when the web page is printed. On the web page inside a browser, the textarea displays just fine, but when I go to print it the bottom of the textarea gets chopped off the bottom of the page, it doesn't continue to print onto the next page. I have this problem in Firefox 3.5 and IE7/8.

I have tried applying numerous CSS styles to the <textarea> control including page-break-inside: avoid and overflow: visible but to no avail.

Edit: here are all the styles that are getting applied according to Firebug:

element.style  {      height:1400px;      overflow-x:visible;      overflow-y:visible;  }    #content div.interviewGpForm div.formRow div.formElement textarea  {      margin-left:1px;  }    #tabContent input, #tabContent select, #tabContent textarea  {      width:80%;  }    textarea  {      font-family:Arial,Helvetica,sans-serif;      font-size:1.2em;      padding:1px;  }    input, select, textarea  {      border:1px solid #BFCDC9;  }    textarea  {      page-break-inside:avoid !important;  }    #page  {      text-align:left;  }  


Place some content under your text area, maybe just a &nbsp; if you want no content there. Also you should be using a "print css if you are not already:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />  


jQuery to the rescue!

$(document).ready(function() {    $('#myTextArea').mouseleave( function(){      $('#myHiddenP').html($(this).val());          });  });  

Thinking about how you use a textarea, you click on it, you type, and then you move the mouse to do something else. This event will only fire when the mouse moves outside of the textbox area (like to go click file->print). When ever this happens, we simply stash the contents of the textbox in a hidden paragraph.

The html:

<textarea id="myTextArea"></textarea>  <p id="myHiddenP"></p>  

Then in your screen stylesheet:

#myTextArea{ height: 1400px; display: block;}  #myHiddenP { display: none;}  

and your print stylesheet:

#myTextArea {display: none;}  #myHiddenP {display: block; height: 1400px;}  


This was an issue I was facing as well when working on a recent project. The problem appears to have to do with the XHTML declaration at the top of the page. Using either STRICT or TRANSITIONAL appear to cause the browser not print the overflow content. Removing the DTD solved the issue.

Now, I tested this in IE7 and FF 2.0 and only IE understood the overflow:visible in the print stylesheet. My target audience use IE, so I'm good for now removing the DTD (which is really bad!!!) as I have not been able to find a better solution and this didn't need any extra code to get this working.


Have you traced the styles being applied to textarea? Specifically do you have any print styles being applied (probably by the browser defaults?) that need to be overridden?

Try adding summat like this into your stylesheet

@media print {    /* style sheet for print goes here */    textarea { overflow:visible };  }  


There is an old IE bug report (for IE 5.5) about the same issue, and the workaround is to use javascript to copy content from the textarea into a "div", and hide the original textarea: http://support.microsoft.com/kb/294901

Looks like this is bug is not fixed after so many years!


Are you setting the height/width in rows and cols, or with the CSS properties?


This seems to be a generic limitation with HTML itself. I tried added a new completely blank page with absolutely no external CSS and scripts loaded in, using the markup below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>  </head>  <body>      <div>          <textarea cols="50" rows="100" style="overflow: visible; page-break-inside: avoid;"></textarea>      </div>  </body>  </html>  

...and it still gets chopped off when I go to print. Same behaviour in Firefox, IE7/8 and Opera. What gives? Am I missing something? Surely if something doesn't fit the page then you just continue it on to the next page!?

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »