ansaurus

Question

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

Answer 1

A:

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

Bobby 2009-09-08 15:18:07

I like the sound of that tho...

daddywoodland 2009-09-08 15:21:49

It's been set via CSS using an explicit Height in pixels

Sunday Ironfoot 2009-09-08 15:24:08

Answer 2

+1 A:

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

daddywoodland 2009-09-08 15:21:23

The website has a dedicated print stylesheet that gets loaded in last (inside the <head>). I have added the following styles:textarea{ page-break-inside: avoid !important; overflow: visible !important; border: 2px solid red !important;}Border is there just to make sure the print CSS is being set properly.It still gets chopped off!

Sunday Ironfoot 2009-09-08 15:27:35

Please see edit in main question above for CSS styles being applied.

Sunday Ironfoot 2009-09-08 15:35:20

Answer 3

+1 A:

Place some content under your text area, maybe just a   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" />

Armitage 2009-09-08 15:23:03

I've already added a print stylesheet and tried apply various overflow properties to textareas. I've also tried added and random text directly below the textarea element and it gets chopped off along with the textarea, although if I place some random text in a <p> element, it appears on the next page, but the <textarea> still gets chopped off.

Sunday Ironfoot 2009-09-08 15:52:25

Answer 4

A:

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"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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!?

Sunday Ironfoot 2009-09-08 16:16:30

I think it's more accurate to say it's a limitation of browsers rather than of HTML. Just about all existing browsers are utterly rubbish at printing stuff, and they don't offer much (if any) support for things like page-break-inside: http://reference.sitepoint.com/css/page-break-inside

NickFitz 2009-09-08 16:32:03

Answer 5

A:

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

Bobby 2010-01-24 04:57:25

You could also try tying this to some other jquery events if you have other specific needs: http://api.jquery.com/category/events/mouse-events/

Bobby 2010-01-24 05:22:59

Answer 6

A:

Hi.

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.

Avinash Prasad 2010-07-02 19:40:24

ansaurus

tags:

views:

answers:

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

related questions