Hello,
I’m working on a web app which contains long forms.
We’re using a plugin to make textareas auto-expand. It’s very much like this example which is used in a Sitepoint article : [URL=“http://blogs.sitepoint.com/build-auto-expanding-textarea-1/”]How to Build an Auto-Expanding Textarea jQuery Plugin, Part 1
My problem is that when the user inputs a lot of text (I’m talking 2000 or 3000 words here) the auto-expand plugin works fine, however when I try printing the page, the content of the textarea gets cut off at the end of the first page.
The same thing happens in the example I mentioned, in case you wanted to see for yourself.
My print stylesheet has this css for now :
textarea {
height: auto;
overflow: visible!important;
page-break-inside: avoid !important;
}
I’m not sure whether css can fix this or do I need javascript or some server side solution?
Thanks for your help
Is this all browsers, or is it Firefox?
I forget who even works with page-break, or any of the page-anythings… it seems the browser devs are way more interested in making stuff transition around or adding shadows and rounded corners to stuff than making their browsers adhere to a decade-old print spec. sigh
In the example you linked to, I have a fixed textarea (I don’t have Javascript enabled, so I don’t get any expansion. I personally find the thing way too tiny to bother typing anything in without JS.) and after copying your post 40 times into the thing, checking in FF’s print-preview showed a tiny textarea… but then, the example doesn’t have a print stylesheet, so I really can’t check how a print stylesheet would work.
the height: auto (you don’t need important) is nice but I believe when height is auto on a text area, it will default to the rows setting from the HTML.
I’ve never heard of anything ever overflowing from a text-area, but now that you mention it, it is a special element who’s automatically set at overflow: auto isn’t it? I would have to check the specs to know for certain.
The jQuery unfortunately seems to be setting the actual height directly on the thing. But the max in any case is 99999px. Something you could maybe just always set in your print.css?
Thanks for your reply Stomme poes.
As far as I can tell, it’s the same thing on all browsers.
If you’re not testing it with javascript enabled it’s totally normal that you’re not able to print the part of the text that’s hidden.
I hadn’t realised that the max height was 99999px but it’s not the issue here. With javascript enabled the textarea does expand properly, it’s really just printing it that’s the problem. It goes to the end of the page and then it won’t continue printing the remaining part of the textarea. It’s odd.
The only solution I’ve come across so far requires some code to turn the textarea into a DIV. I was hoping for a CSS solution.
You’re probably right about the height: auto. I was desperately trying everything I could think of, which is why I put !important everywhere ! It didn’t make any difference though. 
If you’re not testing it with javascript enabled it’s totally normal that you’re not able to print the part of the text that’s hidden.
Oh, well there you go: you would need a browser to be able to run javascript when it prints. Though I still suspect simply setting the height of the textarea to some ginormous number in a print.css would fix this for everyone.
I have no idea how you would do that. I think it may not be possible for security reasons even.
Though I still suspect simply setting the height of the textarea to some ginormous number in a print.css would fix this for everyone.
Except Firefox. But that one’s a lost cause.
Using Opera with JS enabled, I’m getting the same problem - the textarea is cut off at the bottom of the page and doesn’t continue onto the next page.
Unfortunately, as Stomme Poes says, page-break properties for print are very badly supported across most/all browsers - Opera is usually the one that works, and this has foxed even it.
A solution (although more of a hack than a fix) would be to make the textarea much wider, so that it’s less likely to hit the bottom of the page, so you’re less likely to lose text when printing.
Thanks for your suggestions. I don’t even think it has to do with the page-break property since this doesn’t even work on the most modern browsers.
Or rather, even the most modern browsers don’t support page-break properties like they should when it comes to textareas.
I can’t cheat here and make the textarea wide or higher. I’ve already set my print styles to fit the paper and the people who’re using our application are likely to input A LOT of text so whatever the width it won’t be enough.
I think there is no CSS-only solution, that’s all!
Cheers guys