html page with textarea

Question

I have textarea which shows only 3 lines at time and uses a scroll bar. Now when I print the html in which I have textarea, it only prints the visible part (i.e. 3 lines only).

I want that when user prints the html page, it should print the entire text inside the text box instead of visible part only.

http://stackoverflow.com/questions/4435906/print-when-textarea-has-overflow — G.L.P, Mar 05 '15 at 10:59
Look into the [@media print rule](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) - it will allow you to define a style for printing. — Filburt, Mar 05 '15 at 11:00
@Sunny You can do it with help of print css. add same text as textarea in another div with class, make that div hidden in your style.css and make div visible and textarea hidden in print css you can check answer below — Vilas Kumkar, Mar 05 '15 at 11:08

Vilas Kumkar · Accepted Answer · 2015-03-05T12:58:40.500

2

Checkout this one Demo and press Ctrl+P, you'll see that <textarea> is hidden and <div class="textarea"> is visible.

.textarea {
  display: none;
}
@media print {
  textarea {
    display: none;
  }
  .textarea {
     display: block;
  }
}

edited Mar 05 '15 at 12:58

answered Mar 05 '15 at 11:10

Vilas Kumkar

1,390
9
18

1

That just works if the textarea content is static.You would need to sync the ´div´ and the ´textarea´ with javascript. – Mario A Mar 05 '15 at 11:24

score 0 · Answer 2 · answered Mar 05 '15 at 11:00

You could define a different height for the textarea when you are printing:

@media print {
   .selectorOfYourTextarea {
      height: 500px;
   }
}

This will make your textarea 500px in height only for the printer. The problem though still is that 500px might not be enough.

html page with textarea

2 Answers2