I am currently having trouble with my print properties for a table I have. Two specific elements are not being pushed to a new page when it reaches the bottom of the first page. The first element is the span classes that should be kept at the bottom of a page. When a new page is added, it should be pushed to the bottom of that new page. Currently it is only on the first page and does not move. And when the table is big enough, it bleeds into the span classes. Like this:
This is a print of my first page. If I add another row (15th row), that new row will print onto the next page (which is good) but for now 14 rows only prints to one page and bleeds into the two span elements I have. How can I have that 14th row pushed to a new page as well as the span elements?
$('document').ready(() => {
// Handler to Add New Asset
const table = $("#formTable tbody");
let count = 1;
$('#add').click(() => {
const newRow = `
<tr index="${count}">
<form>
<td><input id='asset_tag_no${count}' type='text' value='9999' bottom required /></td>
<td><input id='manufacturer_serial_no${count}' type='text' value='9999999' bottom required/></td>
<td><textarea id='description${count}' type='text' bottom required description>AUDIOTECNICA- Microphone AT 4050/CMS STUDIO</textarea></td>
<td><input id='cost${count}' type='value' bottom required value='2400'/></td>
<td><input id='po_no${count}' type='text' bottom required value='554-682'/></td>
<td><textarea id='remarks${count}' type='text' bottom required remarks></textarea></td>
<td><button type="button" index="${count}" class="btn btn-danger btn-remove">X</button></td>
</form>
</tr>
`;
table.append(newRow);
// Handler to Remove New Asset
$('.btn-remove').click(function(){
let index = $(this).attr('index');
$(`tr[index='${index}'`).remove();
});
count++;
});
}).header{
text-align: center;
margin-bottom: 50px;
}
h1, h2{
font-size: 1rem;
}
/* table{
font-size: 10pt;
} */
@media screen {
input{
text-align: center;
}
input#date{
width: -webkit-fill-available;
}
nav{
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
}
th,td{
padding: 5px !important;
vertical-align: middle;
}
table{
font-size: 10pt;
}
.flex {
display: flex;
flex: auto;
/* border: 1px solid red; */
}
.flex-box {
width: 25px;
/* height: 1000px; */
/* background: rgba(216, 143, 229, 0.499); */
}
.button{
display: flex;
/* display: inline !important; */
flex: auto;
height: 40px;
gap: 12px;
margin: 1px;
}
.btn-remove{
padding: 5px;
width: 25px;
height: 25px;
font-size: 0.7rem;
font-weight: bold;
}
textarea[description]{
height: 50px;
width: 200px;
resize: none;
font-size: 12px !important;
text-align: center;
}
textarea[remark]{
height: 50px;
width: 200px;
resize: none;
font-size: 12px !important;
text-align: center;
}
.pco, .dh{
visibility: collapse;
display:none;
}
}
@media print {
html, body {
height: 99%;
}
input {
text-align: center;
border:none;
}
input#date{
width: -webkit-fill-available;
}
.navbar{
visibility: collapse;
content-visibility: hidden;
display:none !important;
padding: 0px;
}
@page {
size: landscape;
margin: 10;
background-image: none;
}
button{
display: none !important;
}
th,td{
font-size: 10.5px;
padding: 5px !important;
vertical-align: middle;
page-break-after:auto;
page-break-inside:avoid;
}
textarea[remark]{
height: 40px;
width: 300px;
text-align: start;
resize: none;
text-align: center !important;
display: block;
border:none;
}
textarea[description]{
border: none;
text-align: center;
height: 40px;
resize: none;
display:block;
width: 300px;
}
tr {
display: table-header-group;
text-align: center;
page-break-inside: avoid;
page-break-after:auto
}
/* Adds a break */
.break {
display: block;
}
/* Disables all breaks */
br {
display:none;
}
/* line properties */
.pco{
font-size: 11px;
position: absolute;
bottom: 0px;
display: inline-block;
}
.dh{
font-size: 11px;
position: fixed;
bottom: 0;
right: 0;
display: inline-block;
}
.pco > .line {
display: inline-block;
border-bottom: 1px solid #000;
width: 250px;
}
.dh > .line {
display: inline-block;
border-bottom: 1px solid #000;
width: 250px;
}
table{
page-break-after:auto;
}
thead { display:table-header-group; }
tfoot { display:table-footer-group; }
}<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- BOOTSTRAP + JQUERY -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="./css/disposal.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./js/./disposal.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<body>
<div class="wrapper">
<form div class="flex">
<table>
<div class="flex-box"></div>
<tr>
<td align="right" id='date'><b>Date:</b></td>
<td align="left"><input type="date" id="date" required/></td>
</tr>
<tr>
<td align="right" id='department'><b>Dept/Division:</b></td>
<td align="left"><input type="text" id="department" required/></td>
</tr>
<tr>
<td align="right" id='location'><b>Location:</b></td>
<td align="left"><input type="text" id="location" required/></td>
</tr>
<tr>
<td align="right" id='resp'><b>Resp. Ctr:</b></td>
<td align="left"><input type="text" id="resp" required/></td>
</tr>
<br class="break">
</table>
</div>
<br><br><br><br>
<div class="flex">
<table class='table' id='formTable' >
<div class="flex-box"> <br class="break"> </div>
<tr>
<th>  Asset Tag No.</th>
<th>Manufacturer Serial No.</th>
<th>  Description</th>
<th>Cost/ Est. Cost</th>
<th>Method of Disposal</th>
<th>RC to Credit</th>
<th>    Remarks</th>
</tr>
</table>
</div>
<br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='add' >+ Add New Asset</button>
</div>
<br>
<div class="button">
<div class="flex-box"></div>
<button type="button" class="btn btn-outline-primary" id='save'>SAVE</button>
<button class="btn btn-primary" type="submit" id='submit' >SUBMIT</button>
<button type="button" class="btn btn-secondary" onclick="window.print();return false;"/>EXPORT PDF</button>
</div>
</form>
<div> <br class="break" class="break"> </div>
<div>
<span class ="pco">Property Control Officer: <span class = "line"></span></span>
<span class ="dh"> Department/Division Head: <span class = "line"></span></span>
</div>
</div>
</body>
</html>