On my current project, we are working on a feature to allow printing of reports. Every question in the report uses a textarea for comments. We ran into an interesting issue when comments overflow the textarea and cause it to scroll. When the report is printed, the textarea cuts off the part of the comment.
We looked at a few possible solutions for this issue. One involved automatically resizing the textarea to make enough room for its content. While this could fix our issues, it can also make the already long form even longer.
What we ended up doing was using javascript to render a copy of the textarea as a “div” element. By applying a styling class to the textarea and the div, we could display the textarea on the computer screen to the user and use the div for printing. The javascript code was written using jQuery
This code binds to the change event on the textarea to update the contents of the print viewable div. It modifies the DOM structure surrounding the textarea to work its goodness. Here is a before and after of the textarea.
So, if you anticipate users printing forms with textareas, remember to make them accessible to the printer. Feel free to use an auto-resizing textarea or use my method of keeping a copy around with a print stylesheet.
Amiable brief and this fill someone in on helped me alot in my college assignement. Gratefulness you seeking your information.
Thank you it worked.
my css has to be like this
for the screen:
.screen_only
{
}
.print_only
{
display : none;
}
for print:
.screen_only
{
display : none;
}
.print_only
{
display:block;
}
For print when I don’t have anything on the class print_only, it shows nothing.
Thank you again for this. Save my day.
Ho also there’s little typpo error, there’s right parenthese missing.
textarea_container.append(screen_textarea).append(print_textarea);
$(this).replaceWith(textarea_container);
update_text(textarea_container);
};
should be like
textarea_container.append(screen_textarea).append(print_textarea);
$(this).replaceWith(textarea_container);
update_text(textarea_container);
});
the closing parenthese is for closing the “each(…”