I work on asp.net mvc application . I face issue on print report div container .
this issue happen on bottom section that have signature date and reference No that display out side bottom border
div class container is my issue it display outside bottom border .
I display signature and date on the bottom of page but this section display on second page and outside bottom border so how to solve that
so How to solve this issue
html code
@model HR.WorkforceRequisition.Models.WorkforceRequest @{ Layout = null; } <!DOCTYPE html> <html> <head> <title>Print Request</title> @Styles.Render("~/Content/PrintStyle") </head> <body onload="window.print();"> <div class="container"> <div class="header"> <div class="header-HRlogo"> <img src="~/Images/HRlogo.jpg" style="max-width: 30mm; max-height: 15mm; margin: 15px; " /> </div> <div class="header-Title"> </div> <div class="header-CompanyLogo"> <img src="~/Images/CompanyLogo.jpg" style="max-height: 23mm; margin: 1px;" /> </div> </div> <div class="requestInfo"> <div class="flex"> <div class="requestInfo-flex-div-1"> <label class="requestInfo-lable-1">DATE:</label> </div> <div class="requestInfo-flex-div-2 modelData"> @Model.CreatedDate.ToString("dd/MM/yyyy") </div> <div> <label class="requestInfo-lable-1">@Html.DisplayNameFor(model => model.WorkforceRequestID):</label> </div> <div class="requestInfo-flex-div-4 modelData"> @Model.WorkforceRequestID </div> </div> <div class="flex" style="padding-top: 5px;"> <div class="requestInfo-flex-div-1"> <label class="requestInfo-lable-1">DEPARTMENT:</label> </div> <div class="requestInfo-flex-div-2 modelData" style="width: 126.5mm"> @Model.DepartmentName </div> </div> <div class="flex" style="padding-top: 5px;"> <div class="requestInfo-flex-div-1"> <label class="requestInfo-lable-1">@Html.DisplayNameFor(model => model.Section):</label> </div> <div class="requestInfo-flex-div-2 modelData" style="width: 126.5mm"> @Model.Section </div> </div> <div class="flex" style="padding-top: 5px;"> <div class="requestInfo-flex-div-1"> <label class="requestInfo-lable-1">REQUIRED POSITION:</label> </div> <div class="requestInfo-flex-div-2 modelData" style="width: 90mm"> @Model.RequiredPosition </div> <div> <label class="requestInfo-lable-1">@Html.DisplayNameFor(model => model.Qty):</label> </div> <div class="requestInfo-flex-div-4 modelData" style="width: 17mm"> @Model.Qty </div> </div> <div class="flex" style="padding-top: 5px;"> <div class="requestInfo-flex-div-1"> <label class="requestInfo-lable-1">REPORTING TO:</label> </div> <div class="modelData" style="border-bottom: solid 1px black;flex:1;"> <span> </span> @Model.ReportingTo </div> </div> <div class="flex" style="padding-top: 5px;"> <div class="requestInfo-flex-div-1"> <label class="requestInfo-lable-1">REASONS FOR REQUISITION:</label> </div> <div class="modelData" style="flex:1;"> </div> </div> @*check mark codes => ✓ / ? / ✓*@ <table width="100%" style=" margin-top: 6px;"> <tr class="flex"> <td class="flex" style="width:75mm;"> <div class="square"> @if (Model.Budgeted.Value) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> Budgeted Position, If Budgeted, Pls.Specify, </span> </td> <td class="flex" style="width:25mm;"> <div class="square"> @if (Model.Replacement == false && Model.Adjustment == false) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> New </span> </td> <td class="flex" style="width:35mm;"> <div class="square"> @if (Model.Replacement == true) { <b class="checkMark">✓</b> } </div> <span class="requestInfo-lable-2"> Replacement </span> </td> <td class="flex"> <div class="square"> @if (Model.Adjustment == true) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> Adjustment </span> </td> </tr> </table> <table width="100%" style=" margin-top: 6px;"> <tr class="flex"> <td class="flex" style="width:80mm;"> @if (Model.Replacement == true) { <label class="requestInfo-lable-2">@Html.DisplayNameFor(model => model.ReplacmentTo) :</label> <div class="requestInfo-lable-2" style="border-bottom: solid 1px black;flex:1;"> <span> </span> @Model.ReplacmentTo </div> @*<label> @Model.ReplacmentTo</label><br />*@ <label class="requestInfo-lable-2">@Html.DisplayNameFor(model => model.ReplacementReason):</label> <div class="requestInfo-lable-2" style="border-bottom: solid 1px black;flex:1;"> <span> </span> <div style="width:95px;">@Model.ReplacementReason</div> </div> } </td> </tr> </table> <table width="100%" style=" margin-top: 4px;"> <tr class="flex"> <td class="flex" style="width:55mm;"> <div class="square"> @if (!Model.Budgeted.Value) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> Non Budgeted (Justification) </span> </td> <td style="border-bottom: solid 1px black;width:100%;"> </td> </tr> </table> <table width="100%" style=" margin-top: 4px;"> <tr class="flex"> <td class="flex" style="width:55mm;"> <span class="requestInfo-lable-2"> </span> </td> <td style="border-bottom: solid 1px black;width:100%;"> </td> </tr> <tr class="flex"> <td class="flex" style="width:55mm;"> <span class="requestInfo-lable-2"> </span> </td> <td style="width:100%;"> </td> </tr> </table> <table width="100%" style="border-top: solid 1px; border-bottom: solid 1px; margin-top: 4px; padding: 8px 0px;"> <tr class="flex"> <td class="flex" style="width:55mm;"> <label class="requestInfo-lable-1">JOB DESCRIPTION AVAILABILITY:</label> </td> <td class="flex" style="width:15mm;"> <div class="square"> @if (Model.JobDescriptionAvailable.Value) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> Yes </span> </td> <td class="flex"> <div class="square"> @if (!Model.JobDescriptionAvailable.Value) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> No (If No,Kindly fill & attach the Job Description Questionnaire form) </span> </td> </tr> </table> <table width="100%" style="border-top: solid 1px; border-bottom: solid 1px; padding: 4px 0px;"> <tr class="flex"> <td class="flex" style="width:55mm;"> <label class="requestInfo-lable-1">REQUIREMENTS:</label> </td> <td style="width:26mm;"></td> <td style="width:30mm;"></td> <td></td> </tr> <tr class="flex" style="padding-top: 5px;"> <td class="flex" style="width:55mm;"> <span class="requestInfo-lable-2"> Gender </span> </td> <td class="flex" style="width:26mm;"> <div class="square"> @if (Model.Gender.GenderDescription.ToUpper() == "MALE") {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> Male </span> </td> <td class="flex" style="width:30mm;"> <div class="square"> @if (Model.Gender.GenderDescription.ToUpper() == "FEMALE") {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> Female </span> </td> <td class="flex"> <div class="square"> @if (Model.Gender.GenderDescription.ToUpper() == "NO PREFERENCE") {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> No Preference </span> </td> </tr> <tr class="flex" style="padding-top: 5px;"> <td class="flex" style="width:55mm;"> <span class="requestInfo-lable-2"> Age Range: </span> </td> <td class="flex" style="width:26mm;"> <div class="square"> @if (Model.AgeRange.AgeRangeDesc.ToUpper() == "18 - 35") {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> 18 - 35 </span> </td> <td class="flex" style="width:30mm;"> <div class="square"> @if (Model.AgeRange.AgeRangeDesc.ToUpper() == "35 - 50") {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> 35 - 50 </span> </td> <td class="flex"> <div class="square"> @if (Model.AgeRange.AgeRangeDesc.ToUpper() == "NO PREFERENCE") {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> No Preference </span> </td> </tr> <tr class="flex" style="padding-top: 8px;"> <td class="flex" style="width:55mm;"> <span class="requestInfo-lable-2">Years of Experience: @Model.ExperienceYears </span> </td> <td class="flex"> <span class="requestInfo-lable-2"> As per Job Description </span> </td> <td></td> <td></td> </tr> </table> </div> <table class="tableBorderCollaps" style="width: 170.75mm; margin: 0px -1px;"> <tr> <th class="tableBorderCollaps" colspan="6" style="background-color: #dddddd;"> <label class="requestInfo-lable-1">FACILITY/ASSET REQUIREMENT</label> </th> </tr> <tr> <th class="tableBorderCollaps" colspan="3" style="background-color: #dddddd;"> <label class="requestInfo-lable-1">PROVIDED BY I.T. DEPARTMENT</label> </th> <th class="tableBorderCollaps" colspan="3" style="background-color: #dddddd;"> <label class="requestInfo-lable-1">PROVIDED BY ADMIN DEPARTMENT</label> </th> </tr> <tr> <th class="tableBorderCollaps" style="text-align:left;background-color: #dddddd;"> <label class="requestInfo-lable-1">DESCRIPTION</label> </th> <th class="tableBorderCollaps" style="background-color: #dddddd;"> <label class="requestInfo-lable-1">YES</label> </th> <th class="tableBorderCollaps" style="background-color: #dddddd;"> <label class="requestInfo-lable-1">NO</label> </th> <th class="tableBorderCollaps" style="text-align:left;background-color: #dddddd;"> <label class="requestInfo-lable-1">DESCRIPTION</label> </th> <th class="tableBorderCollaps" style="background-color: #dddddd;"> <label class="requestInfo-lable-1">YES</label> </th> <th class="tableBorderCollaps" style="background-color: #dddddd;"> <label class="requestInfo-lable-1">NO</label> </th> </tr> <tr> <td class="tableBorderCollaps"> <span class="requestInfo-lable-2"> @Html.DisplayNameFor(model => model.PC) </span> </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (Model.PC.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (!Model.PC.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps"> <span class="requestInfo-lable-2"> @Html.DisplayNameFor(model => model.OfficeFurniture) </span> </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (Model.OfficeFurniture.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (!Model.OfficeFurniture.Value) {<b class="checkMark"> ✓ </b>} </td> </tr> <tr> <td class="tableBorderCollaps"> <span class="requestInfo-lable-2"> @Html.DisplayNameFor(model => model.UserID) </span> </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (Model.UserID.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (!Model.UserID.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps"> <span class="requestInfo-lable-2"> @Html.DisplayNameFor(model => model.SpaceAvailability) </span> </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (Model.SpaceAvailability.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (!Model.SpaceAvailability.Value) {<b class="checkMark"> ✓ </b>} </td> </tr> <tr> <td class="tableBorderCollaps"> <span class="requestInfo-lable-2"> @Html.DisplayNameFor(model => model.Email) </span> </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (Model.Email.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (!Model.Email.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps"> <span class="requestInfo-lable-2"> @Html.DisplayNameFor(model => model.BusinessCard) </span> </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (Model.BusinessCard.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (!Model.BusinessCard.Value) {<b class="checkMark"> ✓ </b>} </td> </tr> <tr> <td class="tableBorderCollaps"> <span class="requestInfo-lable-2"> @Html.DisplayNameFor(model => model.LandLine) </span> </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (Model.LandLine.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps" style="text-align:center;"> @if (!Model.LandLine.Value) {<b class="checkMark"> ✓ </b>} </td> <td class="tableBorderCollaps"> <span class="requestInfo-lable-2"> </span> </td> <td class="tableBorderCollaps" style="text-align:center;"> </td> <td class="tableBorderCollaps" style="text-align:center;"> </td> </tr> <tr> <td class="tableBorderCollaps" colspan="3"> <span class="requestInfo-lable-2"> Others Pls Specify: @Model.OtherAssetFromIT </span> </td> <td class="tableBorderCollaps" colspan="3"> <span class="requestInfo-lable-2"> Others Pls Specify: @Model.OtherAssetFromAdminDep </span> </td> </tr> </table> <div class="flex" style="margin-top:10px;"> <div class="requestInfo-flex-div-1"> <label class="requestInfo-lable-1">TARGET EMPLOYMENT DATE:</label> </div> @*<div class="modelData" style="flex: 1; border-bottom: solid 1px black; width: 95%;margin-left:5px;">*@ <div class="modelData" style="flex: 1; border-bottom: solid 1px black; width: 100%;"> @if (Model.TargetEmploymentDate != null) { <div class="requestInfo-lable-2"> <span> </span> @Model.TargetEmploymentDate.Value.ToString("dd/MM/yyyy") </div> } </div> </div> <table width="100%" style=" margin-left: -3px; margin-top: 5px;"> <tr class="flex"> <td class="flex" style="width:40mm;padding-left:-1px"> <label class="requestInfo-lable-1">PREFERRED NATIONALITY: </label> </td> <td class="flex" style="width:27mm;"> <div class="square"> @if (Model.PreferredNationality.NationalityName.ToUpper() == "UAE NATIONALS") {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> UAE Nationals </span> </td> <td class="flex" style="width:30mm;"> <div class="square"> @if (Model.PreferredNationality.NationalityName.ToUpper() == "GCC Countries".ToUpper()) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> GCC Countries </span> </td> <td class="flex" style="width:35mm;"> <div class="square"> @if (Model.PreferredNationality.NationalityName.ToUpper() == "Other Arab Nationals".ToUpper()) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> Other Arab Nationals </span> </td> <td class="flex"> <div class="square"> @if (Model.PreferredNationality.NationalityName.ToUpper() == "Other Expats".ToUpper()) {<b class="checkMark">✓</b>} </div> <span class="requestInfo-lable-2"> Other Expats </span> </td> </tr> </table> <div class="flex" style="margin-top:5px;"> <div class="requestInfo-flex-div-1"> <label class="requestInfo-lable-1">Other Remarks (If Any):</label> </div> <div class="modelData" style="flex: 1; border-bottom: solid 1px black; width: 100%;"> <span class="modelData"> @Model.Remarks</span> </div> </div> <br /> <div style="height: 190px;margin-top:-20px;"> <table width="100%"> <thead> <tr> <td style="width: 76mm; height:30px;"> <label class="requestInfo-lable-1" style="font-size:11px">Name</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-size:11px">Position</span> </td> <td style="width:38mm;"> <label class="requestInfo-lable-1" style="font-size:11px">Status / Signature</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-size:11px">Date</span> </td> </tr> </thead> @if (!string.IsNullOrEmpty(Model.CreatedByName)) { <tr style="height: 5px;"> <td style="width: 76mm;"> <label class="requestInfo-lable-1" style="font-weight:normal;">@Model.CreatedByName</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-weight:normal;">Requester</span> </td> <td style="width:38mm;"> <label class="requestInfo-lable-1" style="font-weight:normal;">Requested</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-weight:normal;">@Model.CreatedDate.ToString("dd/MM/yyyy")</span> </td> </tr> } @if (Model.LineManagerUserName != null && !string.IsNullOrEmpty(Model.LineManagerUserName.ToString()) && Model.LineManagerUser > 0) { <tr style="height: 5px;"> <td style="width: 76mm;"> <label class="requestInfo-lable-1" style="font-weight:normal;">@Model.LineManagerUserName</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-weight:normal;">Line Manager</span> </td> <td style="width:38mm;"> @if (@Model.LineManagerApproved == true) { <label class="requestInfo-lable-1" style="font-weight:normal;">Approved</label> } else { <label class="requestInfo-lable-1" style="font-weight:normal;">Rejected</label> } </td> <td style="width: 38mm;"> @if (@Model.LineManagerApprovalDate != null) { <span class="requestInfo-lable-1" style="font-weight:normal;"> @Model.LineManagerApprovalDate.Value.ToString("dd/MM/yyyy") </span> } </td> </tr> } @if (Model.DepartementHeadUserName != null && !string.IsNullOrEmpty(Model.DepartementHeadUserName.ToString()) && Model.DepartementHeadUser > 0) { <tr style="height: 5px;"> <td style="width: 76mm;"> <label class="requestInfo-lable-1" style="font-weight:normal;">@Model.DepartementHeadUserName</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-weight:normal;">Department Head</span> </td> <td style="width:38mm;"> @if (@Model.DepartementHeadApproved == true) { <label class="requestInfo-lable-1" style="font-weight:normal;">Approved</label> } else { <label class="requestInfo-lable-1" style="font-weight:normal;">Rejected</label> } </td> <td style="width: 38mm;"> @if (@Model.DepartementHeadApprovalDate != null) { <span class="requestInfo-lable-1" style="font-weight:normal;"> @Model.DepartementHeadApprovalDate.Value.ToString("dd/MM/yyyy") </span> } </td> </tr> } @if (Model.PlanningUser != null && !string.IsNullOrEmpty(Model.PlanningUser.ToString()) && Model.PlanningUser > 0) { <tr style="height: 5px;"> <td style="width: 76mm;"> <label class="requestInfo-lable-1" style="font-weight:normal;">@Model.PlanningUserName</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-weight:normal;">Planning</span> </td> <td style="width:38mm;"> @if (@Model.PlanningApproved == true) { @*<label class="requestInfo-lable-1" style="font-weight:normal;">Approved</label>*@ <label class="requestInfo-lable-1" style="font-weight:normal;">Reviewed</label> } else { <label class="requestInfo-lable-1" style="font-weight:normal;">Rejected</label> } </td> <td style="width: 38mm;"> @if (@Model.PlanningApprovalDate != null) { <span class="requestInfo-lable-1" style="font-weight:normal;"> @Model.PlanningApprovalDate.Value.ToString("dd/MM/yyyy") </span> } </td> </tr> } @if (Model.RecruitmentUserName != null && !string.IsNullOrEmpty(Model.RecruitmentUserName.ToString()) && Model.RecruitmentUser > 0) { <tr style="height: 5px;"> <td style="width: 76mm;"> <label class="requestInfo-lable-1" style="font-weight:normal;">@Model.RecruitmentUserName</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-weight:normal;">Recruitment</span> </td> <td style="width:38mm;"> @if (@Model.RecruitmentApproved == true) { @*<label class="requestInfo-lable-1" style="font-weight:normal;">Approved</label>*@ <label class="requestInfo-lable-1" style="font-weight:normal;">Reviewed</label> } else { <label class="requestInfo-lable-1" style="font-weight:normal;">Rejected</label> } </td> <td style="width: 38mm;"> @if (@Model.RecruitmentApprovalDate != null) { <span class="requestInfo-lable-1" style="font-weight:normal;"> @Model.RecruitmentApprovalDate.Value.ToString("dd/MM/yyyy") </span> } </td> </tr> } @if (Model.HREDUser != null && !string.IsNullOrEmpty(Model.HREDUser.ToString()) && Model.HREDUser > 0) { <tr style="height: 5px;"> <td style="width: 76mm;"> <label class="requestInfo-lable-1" style="font-weight:normal;">@Model.HREDUserName</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-weight:normal;">HRE Director</span> </td> <td style="width:38mm;"> @if (@Model.HREDApproved == true) { <label class="requestInfo-lable-1" style="font-weight:normal;">Approved</label> } else { <label class="requestInfo-lable-1" style="font-weight:normal;">Rejected</label> } </td> <td style="width: 38mm;"> @if (@Model.HREDApprovalDate != null) { <span class="requestInfo-lable-1" style="font-weight:normal;"> @Model.HREDApprovalDate.Value.ToString("dd/MM/yyyy") </span> } </td> </tr> } @if (Model.CEOUser != null && !string.IsNullOrEmpty(Model.CEOUser.ToString()) && Model.CEOUser > 0) { <tr style="height: 5px;"> <td style="width: 76mm;"> <label class="requestInfo-lable-1" style="font-weight:normal;">@Model.CEOUserName</label> </td> <td style="width: 38mm;"> <span class="requestInfo-lable-1" style="font-weight:normal;">CEO</span> </td> <td style="width:38mm;"> @if (@Model.CEOApproved == true) { <label class="requestInfo-lable-1" style="font-weight:normal;">Approved</label> } else { <label class="requestInfo-lable-1" style="font-weight:normal;">Rejected</label> } </td> <td style="width: 38mm;"> @if (@Model.CEOApprovalDate != null) { <span class="requestInfo-lable-1" style="font-weight:normal;"> @Model.CEOApprovalDate.Value.ToString("dd/MM/yyyy") </span> } </td> </tr> } </table> </div> <div class="container" style="border-top: solid 1px; margin-top: 1px; padding-top: 1px; padding-bottom: 5px; "> <div class="row"> <div class="col-md-12"> <div class="col-md-12" style="align-items: center;display:flex;justify-content: center;flex-direction: row;margin-top:10px;margin-left:-50px;"> <div class="col-md-3" style="margin-left:5px;"> <label class="requestInfo-lable-1"> CEO </label> </div> <div class="col-md-3"> <div style="width: 40mm; border-bottom: solid 1px;margin-left:7px;"> </div> </div> <div class="col-md-3" style="margin-left:160px;"> <label class="requestInfo-lable-1"> Received By </label> </div> <div class="col-md-3"> <div style="width: 40mm; border-bottom: solid 1px;margin-left:7px;"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-md-12" style="align-items: center;display:flex;justify-content: center;flex-direction: row;margin-top:10px;"> <div class="col-md-6"> <label class="requestInfo-lable-1" style="margin-left:-200px;"> Signature and Date </label> </div> <div class="col-md-6"> <label class="requestInfo-lable-1" style="margin-left:130px;"> Signature and Date </label> </div> </div> <div class="footer"> <div style="font-family:'Bold'"> HR FM 04-03-E <span> Version No: 09. Effective Date : 15/03/2020</span> </div> </div> </div> </div> </body> </html>
css file as below PrintStyle
/* Created By Fathi */ @page { size: auto; /* auto is the initial value */ margin: 0mm; /* this affects the margin in the printer settings */ } body { /*height:29.7cm; width:21cm; margin: 20mm 18mm;*/ margin-top: 20mm; margin-left: 21mm; } /*@page { size: 21cm 29.7cm; margin: 20mm 18mm; }*/ .container { width: 17cm; border: solid 2px black; } .header { width: 100%; border-bottom: solid 2px black; /* display:grid; grid-template-columns:34mm 102mm 34mm;*/ display: flex; } .header-HRlogo { width: 34mm; border-right: solid 2px black; display: flex; justify-content: center; } .header-Title { flex: 1; text-align: center; font-family: Arial; } .header-CompanyLogo { width: 34mm; border-left: solid 2px black; display: flex; justify-content: center; } .requestInfo { padding-top: 5px; } .requestInfo-lable-1 { font-size: 9px; font-family: Tahoma; font-weight: bold; /*padding: 1px 10px;*/ white-space: nowrap; } .requestInfo-lable-2 { font-size: 10px; font-family: Tahoma; /*white-space: nowrap;*/ } .flex { display: flex; } .requestInfo-flex-div-1 { width: 37mm; } .requestInfo-flex-div-2 { width: 50mm; border-bottom: solid 1px black; text-align: center; } .requestInfo-flex-div-4 { width: 57mm; border-bottom: solid 1px black; text-align: center; margin-left: 5px; } .modelData { font-size: 12px; } .square { padding: 1px; height: 10px; width: 10px; border: solid 1px black; display: flex; } .checkMark { font-size: 13px; margin-top: -4px; } .tableBorderCollaps { border: 1px solid black; border-collapse: collapse; padding: 0px; } .footer { font-size: 6.5px; margin-left: 4.5mm; margin-top: 2mm; }