I am finishing up the CSS for a form where a user inputs their information, and can export the form to PDF. The only problem I have is, everything looks very large and spacey in the input part when I go to export. The HMTL is fine on the browser, but when printing it is not returning the best results.
Are there any tips to make this fit on 6 lines instead of the whole page? I have attached what it looks like on the browser (left) and the printed results (right)
Here is my HTML and CSS for the HTML as well as print properties!
.header{
text-align: center;
margin-bottom: 50px;
}
h1{
font-size: 1rem;
}
table{
font-size: 10pt;
}
@media screen {
.wrapper{
width: 90%;
margin-right: auto;
margin-left: auto;
}
nav{
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20px;
}
th,td{
padding: 5px !important;
vertical-align: middle;
font-weight: bold;
}
/* Keeps table text centered like on old sheet */
input[bottom]{
text-align: center;
}
textarea[bottom] {
text-align: center;
}
/* Keeps top info centered like on old sheet */
input[top]{
float: right;
width: 150px;
text-align: center;
}
textarea[division]{
font-size: 13px;
height: 70px;
resize: none;
text-align: center;
}
textarea[location]{
font-size: 13px;
height: 50px;
resize: none;
text-align: center;
}
input{
width: 150px;
}
textarea[top]{
float: right;
width: 150px;
}
.note{
visibility: hidden;
}
}
@media print {
input {
border: none;
width: 100px;
}
/* Keeps table text centered like on old sheet */
input[top]{
float: right;
width: 150px;
text-align: left;
}
/* Keeps top info centered like on old sheet */
textarea[division]{
border: none;
float: right;
font-size: 13px;
height: 70px;
resize: none;
text-align: left;
}
textarea[location]{
border: none;
float: right;
font-size: 13px;
height: 50px;
resize: none;
text-align: left;
}
}<!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/record.css" />
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="./js/record-of-transfer.js"></script>
<body>
<nav class="navbar navbar-dark bg-dark">
</nav>
<div class="wrapper">
<div class = 'header'>
<form>
<div class="d-flex justify-content-center">
<div class="p-2 flex-fill"></div>
<div class="flex-fill">
<h1><b><u>TRANSFER-OUT</u></h1></b>
<br>
<div><p><b>Date:</b><input id="date_out" type='date' top required /></p></div>
<div><p><b><br>Department:</b><input id='department_out' type='text' top required /></p></div>
<div><p><b><br>Division:</b><textarea id='division_out' type='text' top required division></textarea></p></div>
<div><p><b><br><br><br>Resp. Ctr:</b><input type='text' id='resp_out' top required/></p></div>
<div><p><b><br>Location:</b><textarea type='text' id='location_out' top required location></textarea></p></div>
<div><p><b><br><br>Property Control Office:</b><input id='prop_out' type='text' top required/></p></div>
<div><p><b><br>Department/Division Head:</b><input id='dhead_out' type='text' top required/></p></div>
</div>
<div class="p-2 flex-fill"></div>
<div class="flex-fill">
<h1><b><u>TRANSFER-IN</u></h1></b>
<br>
<div><p><b>Date:</b><input id="date_in" type='date' top required /></p></div>
<div><p><b><br>Department:</b><input id='department_in' type='text' top required /></p></div>
<div><p><b><br>Division:</b><textarea id='division_in' type='text' top required division></textarea></p></div>
<div><p><b><br><br><br>Resp. Ctr:</b><input type='text' id='resp_in' top required/></p></div>
<div><p><b><br>Location:</b><textarea type='text' id='location_in' top required location></textarea></p></div>
<div><p><b><br><br>Property Control Office:</b><input id='prop_in' type='text' top required/></p></div>
<div><p><b><br>Department/Division Head:</b><input id='dhead_in' type='text' top required/></p></div>
</div>
<div class="p-2 flex-fill"></div>
</div>
</form>
<button type="button" class="btn btn-secondary" onclick="window.print();return false;"/>EXPORT PDF</button>
</div>
</body>
</html>