[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 564
  • Last Modified:

CSS TextArea Print

I would like to set up a css for printing of my forms.  However my forms contain a lot of different sized textareas.  I would like the entire contents of each textarea to be printed.  How can this be done without sending the contents off to another dedicated page?  Can it be done using css at all or should I use Javascript to resize each of the boxes?
0
k2consulting
Asked:
k2consulting
  • 2
  • 2
1 Solution
 
GrandSchtroumpfCommented:
You can use javascript to transfer the content of your textarea into a block-level element that is hidden on screen media.
Then use CSS to hide the textarea and show the block element on printed media.
0
 
k2consultingAuthor Commented:
How would this be done?
0
 
GrandSchtroumpfCommented:
Something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">

div.Printable div {
  display: none;
}

@media print {

  div.Printable textarea {
    display: none;
  }
  div.Printable div {
    display: block;
  }

}

</style>
<script type="text/javascript">

function copyTextAreaContent(source) {

  var text = source.value;
  text = text.replace('<', '&lt;');
  text = text.replace('>', '&gt;');
  source.nextSibling.innerHTML = text;

}

</script>
</head>
<body>

  <div class="Printable">
    <textarea onchange="copyTextAreaContent(this)">Lorem ipsum</textarea><div>Lorem ipsum</div>
  </div>

</body>
</html>
0
 
k2consultingAuthor Commented:
OK I will give this a try.
0
 
MrRioCommented:
Good solution. :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now