I have to print several textarea elements in my code. Here is an example of one:
@media screen { textarea[division]{ font-size: 13px; height: 70px; resize: none; text-align: center; } textarea[top]{ float: right; width: 150px; } } @media print { textarea { margin:0; padding:0; border:none; display:flex; overflow: hidden; } textarea[division]{ overflow: hidden; border: none; margin:0; padding:0; margin-bottom: 0; white-space: nowrap; resize: none; display:block; font-size: 13px; } button{ visibility: hidden; } }
<div><p><b><br>Division:</b><textarea id='transfer_out_division' type='text' placeholder="EMD - AFC Program & Information Management" top required division></textarea></p></div> <button type="button" onclick="window.print();return false;"/>EXPORT PDF</button>
I would like the text to be printed on the same line as Division and push the text to the next line once it runs out of space. How would I fix this issue?
Advertisement
Answer
I correct the HTML part, because there were some <br>
tags, and it does not work very well with CSS placement. I add the .container
class too, in order to use flex-box.
<p class="container"> <b>Division:</b> <textarea id='transfer_out_division' type='text' placeholder="EMD - AFC Program & Information Management" top required division></textarea> </p>
And the CSS part:
@media print { textarea { margin: 0; padding: 0; border: none; overflow: hidden; } textarea[division] { overflow: hidden; border: none; margin: 0; padding: 0; margin-bottom: 0; white-space: nowrap; resize: none; font-size: 13px; } button { visibility: hidden; } .container { display: flex; } }