Content Cut Off When Printing

Issue

So the issue I encounter right now is that I have a textarea set in a table column. The table column and the textarea are resized automatically based on the volume of data input. But the print preview is set in portrait (webpage is landscape). The textarea only inherit the textarea row height but the with or the column of the textarea. For example a textarea with 10 rows of data and each row has 20 columns. In the print preview, the textarea indeed has 10 rows but only has 10 columns in each row. This is causing the original content to be cut off due to not enough space to display all the original data.

Below is my html and css

   <div class="qualification">
        <table id="tableInfo2">
            <tr bgcolor="#56C1FF">
                <td class="text2">KELAYAKAN AKADEMIK</td>    
            </tr></table>
        
            <table id="tableInfo3">
            <tr bgcolor="#DCD4D4">
                <td class="col0">Bil</td>
                <td class="input-column">Kelulusan</td>
                <td>Bidang</td>
                <td>Nama IPT / Negara</td>
                <td class="col1">Tarikh Penganugerahan</td>
            </tr>
            <tr>
                <td class="col0"><input type="text" id="status" value="1." readonly>
                    <br><input type="checkbox" class="remove-checkbox print-hidden">
                </td>
                <td class="input-column">
                    <div class="auto-resizable">
                        <textarea rows="3" placeholder="Master of Computer Science (Software Engineering and Intelligence)"></textarea>
                    </div>
                    </td>
                    <td class="input-column">
                    <div class="auto-resizable">
                        <textarea rows="3" placeholder="Software Engineering and Intelligence"></textarea>
                    </div>
                    </td>
                    <td class="input-column">
                    <div class="auto-resizable">
                        <textarea rows="3" placeholder="Universiti Teknikal Malaysia Melaka"></textarea>
                    </div>
                    </td>
                <td><input type="date" id="status" placeholder="Date" required></td>
            </tr>
            
        </table>
    </div>

and this is the css

 @media print {
.print-hidden {
    display: none;
}

input[type="date"],
textarea {
    /* Maintain styles for calendar and textarea */
    border: 0px solid black;
    padding: 5px;
    width: 100%;
}

/* Hide placeholder sections for print */
input::placeholder,
textarea::placeholder {
    display: none !important;
}

pre, blockquote {
    page-break-inside: avoid;
}
page-orientation:portrait

/* New shit testing*/

* {
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.navbar {
    background: linear-gradient(120deg,#2980b9, #8e44ad);
}

.navdiv {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo a {
    margin-left: 20px;
}

.login {
    font-family: sans-serif;
    margin-right: 40px;
    border-radius: 10px;
    padding: 10px;
    width: 90px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    transition: all 0.5s ease;
}

.login:hover {
    color: orangered;
}

h2 {
    text-align: left;
    font-size: 35px;
    font-style: italic;
}

#cv {
    text-align: left;
    padding: 20px;
}

#cv-title {
    margin-top: 0;
}

.pic {
    float: right;
    margin-top: -180px;
}

#tableInfo {
    width: 80%;
    height: auto;
    border-collapse: collapse;
}

#tableInfo td {
    border: 1px solid black;
    padding: 5px;
}

#tableInfo input[type="text"] {
    border: none;
    width: 100%;
    background: transparent;
    outline: none;
}

#tableInfo2 {
    width: 100%;
    height: auto;
    border-collapse: collapse;
}

#tableInfo3, #tableInfo4, #tableInfo5 {
    width: 100%;
    height: auto;
    border-collapse: collapse;
}

#tableInfo2 td, #tableInfo3 td, #tableInfo4 td, #tableInfo5 td {
    border: 1px solid black;
    padding: 5px;
}

#tableInfo2 input[type="text"], #tableInfo3 input[type="text"], #tableInfo4 input[type="text"], #tableInfo5 input[type="text"] {
    border: none;
    width: 100%;
    background: transparent;
    outline: none;
}

.font1 {
    font-size: 10px;
}

.font2 {
    font-size: 8px;
}

input[type="date"],
input[type="number"],
input[type="email"],
input[type="checkbox"] {
    border: none;
    width: 100%;
    background: transparent;
    outline: none;
}

table td {
    white-space: normal;
}

.text1 {
    text-align: center;
    width: 20%;
}

.text2 {
    font-weight: bold;
    text-decoration: underline;
}

.col0{
    width: 5%;
}

.col1{
   width: 20%;
}

.col2{
    width: 30%;
}

.col3{
    width: 75%;
}

.col5{
    width: 10%;
}

.col6{
    width: 25%;
}

.col4{
    width: 40%;
}

.col7{
    width: 65%;
}

.col8{
    width: 15%;
}

.auto-resizable {
    display: flex;
    height: 100%;
}

textarea {
    width: 100% !important;
    height: 100%;
    border: none;
    resize: none;
    overflow: hidden;
    white-space: normal !important;
    padding: 0;
}

::-webkit-input-placeholder {
    color: transparent;
}

::-moz-placeholder {
    color: transparent;
}

:-ms-input-placeholder {
    color: transparent;
}

:-moz-placeholder {
    color: transparent;
}

/* Hide the calendar element */
.calendar-class {
    display: none;
}

td[rowspan] {
    position: relative;
}

td[rowspan]:before {
    position: absolute;
    content: "";
    top: -1px;
    left: -1px;
    background-color: transparent;
    border:none;
    width: 100%;
    height: 100%;
}

select {
    border: none; /* Hide the border */
    background-color: #FFFFFF; /* Background color */
    padding: 5px; /* Add some padding */
    border-radius: 5px; /* Add rounded corners */
    width: 100%; /* Set the width to 100% */
    outline: none; /* Remove the outline when focused */
    cursor: pointer; /* Show a pointer cursor when hovering */
}

/* Style the options within all select elements */
select option {
    background-color: #ffffff; /* Background color for options */
    color: #000000; /* Text color for options */
}


/* Hide select dropdown arrows */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent url("your-arrow-image-url.png") no-repeat right center;
}

/* Style the options within all select elements */
select option {
    background-color: #ffffff; /* Background color for options */
    color: #000000; /* Text color for options */
}

/* Hide the default value "ddmmyyyy" of the calendar */
input[type="date"]::before {
    color: #999999;
    content: attr(placeholder);
    display: none;
}
input[type="date"] {
    color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
    color: #000000;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
    content: "" !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}


.btnsave {
    width: 30%;
    height: 60px;
    border: 1px solid;
    background: #2691d9;
    border-radius: 25px;
    font-size: 18px;
    color: #e9f4fb;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    margin-top: 5px;
    margin-bottom: 10px;
}

.btnsave:hover {
    border-color: #2691d9;
    transition: .5s;
}

.btnpdf {
    width: 30%;
    height: 60px;
    border: 1px solid;
    background: #2691d9;
    border-radius: 25px;
    font-size: 18px;
    color: #e9f4fb;
    font-weight: 700;
    cursor: pointer;
    outline: none;
    margin-top: 5px;
    margin-bottom: 10px;
}

.btnpdf:hover {
    border-color: #2691d9;
    transition: .5s;
}

.hidden-for-print {
    display: none !important;
}

.input-column{
    width: auto !important;
    height: auto !important;
}

}

Solution

There's no super clean way of doing this, as far as I know. But you can use CSS Grid very creatively together with a tiny bit of JavaScript to show all textarea contents when printing.

The technique relies on adding the contents of the <textarea> to a data- attribute of its parent whenever the user types and then showing that in a full size pseudo-element on top of the <textarea> when printing.

To implement it, you need to add the following CSS to your @media print block:

.auto-resizable {
    display: grid;
}
.auto-resizable::after {
    /* Using JavaScript, the textarea content is placed in a `data-` attribute and with this line we show it outside the textarea when printing */
    content: attr(data-replicated-value) " ";

    /* Use same white space handling as an actual textarea */
    white-space: pre-wrap;

    /* Hidden from view and clicks */
    visibility: hidden;
}
.auto-resizable > textarea {
    /* Disable manual resizing or it will mess the trick up */
    resize: none;
    overflow: hidden;
}
.auto-resizable > textarea,
.auto-resizable::after {
    font: inherit;
    /* Place the textarea and the "fake" print version on top of each other */
    grid-area: 1 / 1 / 2 / 2;
}

And the following onInput attribute to your <textarea>s:

<textarea rows="3" placeholder="..." onInput="this.parentNode.dataset.replicatedValue = this.value"></textarea>

As I only have your print styling, you might need to tweak the code a little for your specific use case.

Answered By - Lasse