Skip to content
Advertisement

CSS Printing Properties using Textarea

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;
    } 
}
Advertisement