Print only text field

Question

I would like to print only the contents of the textarea element from the website page. In particular, I would like to make sure that nothing is cropped by the border of the text field, as the content will be quite large.

What is the best strategy to solve this problem?

Answer 1

Create a print style sheet in which all elements except the text area are set in CSS to display: none; and for the text field, overflow: visible.

Link it to the page with the link tag in the header set to media = "print".

You are done.

Answer 2

Create another CSS with print media set.

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

http://webdesign.about.com/cs/css/a/aa042103a.htm

Answer 3

If the user clicks "Print", you can open a new window with the contents of the text field on a blank page and start printing there, and then close this window.

Update . I think the CSS solutions offered are probably the best strategies, but if anyone likes this offer, they can still promote it.

Answer 4

I would choose a combo of other offers.

Do not kill the print button for the entire page with overriding the stylesheet, but instead provide the button with a text area that allows the user to print only those contents.

This button will open a new window with menu / chrome, etc. and will only clone textarea content (and / or provide a css file for printing)

Answer 5

I made CSS for printing to hide multiple fields. The problem was complicated by the fact that I used nicEdit, which dynamically creates an IFRAME. So I had to add an event that took onblur events and copied them to a hidden (except for printing) Div. "divtext" is the Hid Div, and "storyText" is TextArea.

 textarea { display: none; } */ #divtext { display: block; } div, DIV { border-style: none !important; float: none !important; overflow: visible !important; display: inline !important; } /* disable nearly all styles -- especially the nicedit ones! */ #nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame { display: none !important; } /*hide Nicedit buttons */ .nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt { display: none !important; } 

Javascript code for nicEdit:

 <script type="text/javascript" src="/media/nicEdit.js"></script> <script type="text/javascript"> bkLib.onDomLoaded(function () { var nic = new nicEditor({ fullPanel: true }).panelInstance('storyText'); document.getElementById("storyText").nic = nic; nic.addEvent('blur', function () { document.getElementById("storyText").value = nic.instanceById('storyText').getContent(); document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent(); }); }); </script> 

Answer 6

Was the overflow: visible; Does textarea really work for any of you? FF3 seems to ignore this rule on textarea in print sheets. Not that it's a mistake or something else.