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;
}
Print Request
@Styles.Render("~/Content/PrintStyle")
@Model.CreatedDate.ToString("dd/MM/yyyy")
@Model.WorkforceRequestID
@Model.DepartmentName
@Model.Section
@Model.RequiredPosition
@Model.Qty
@Model.ReportingTo
@*check mark codes => ✓ / ? / ✓*@
@if (Model.Budgeted.Value)
{✓}
Budgeted Position, If Budgeted, Pls.Specify,
@if (Model.Replacement == false && Model.Adjustment == false)
{✓}
New
@if (Model.Replacement == true)
{
✓
}
Replacement
@if (Model.Adjustment == true)
{✓}
Adjustment
@if (Model.Replacement == true)
{
@Model.ReplacmentTo
@*
*@
@Model.ReplacementReason
}
@if (!Model.Budgeted.Value)
{✓}
Non Budgeted (Justification)
@if (Model.JobDescriptionAvailable.Value)
{✓}
Yes
@if (!Model.JobDescriptionAvailable.Value)
{✓}
No (If No,Kindly fill & attach the Job Description Questionnaire form)
Gender
@if (Model.Gender.GenderDescription.ToUpper() == "MALE")
{✓}
Male
@if (Model.Gender.GenderDescription.ToUpper() == "FEMALE")
{✓}
Female
@if (Model.Gender.GenderDescription.ToUpper() == "NO PREFERENCE")
{✓}
No Preference
Age Range:
@if (Model.AgeRange.AgeRangeDesc.ToUpper() == "18 - 35")
{✓}
18 - 35
@if (Model.AgeRange.AgeRangeDesc.ToUpper() == "35 - 50")
{✓}
35 - 50
@if (Model.AgeRange.AgeRangeDesc.ToUpper() == "NO PREFERENCE")
{✓}
No Preference
Years of Experience: @Model.ExperienceYears
As per Job Description
@Html.DisplayNameFor(model => model.PC)
@if (Model.PC.Value)
{ ✓ }
@if (!Model.PC.Value)
{ ✓ }
@Html.DisplayNameFor(model => model.OfficeFurniture)
@if (Model.OfficeFurniture.Value)
{ ✓ }
@if (!Model.OfficeFurniture.Value)
{ ✓ }
@Html.DisplayNameFor(model => model.UserID)
@if (Model.UserID.Value)
{ ✓ }
@if (!Model.UserID.Value)
{ ✓ }
@Html.DisplayNameFor(model => model.SpaceAvailability)
@if (Model.SpaceAvailability.Value)
{ ✓ }
@if (!Model.SpaceAvailability.Value)
{ ✓ }
@Html.DisplayNameFor(model => model.Email)
@if (Model.Email.Value)
{ ✓ }
@if (!Model.Email.Value)
{ ✓ }
@Html.DisplayNameFor(model => model.BusinessCard)
@if (Model.BusinessCard.Value)
{ ✓ }
@if (!Model.BusinessCard.Value)
{ ✓ }
@Html.DisplayNameFor(model => model.LandLine)
@if (Model.LandLine.Value)
{ ✓ }
@if (!Model.LandLine.Value)
{ ✓ }
Others Pls Specify: @Model.OtherAssetFromIT
Others Pls Specify: @Model.OtherAssetFromAdminDep
@**@
@if (Model.TargetEmploymentDate != null)
{
@Model.TargetEmploymentDate.Value.ToString("dd/MM/yyyy")
}
@if (Model.PreferredNationality.NationalityName.ToUpper() == "UAE NATIONALS")
{✓}
UAE Nationals
@if (Model.PreferredNationality.NationalityName.ToUpper() == "GCC Countries".ToUpper())
{✓}
GCC Countries
@if (Model.PreferredNationality.NationalityName.ToUpper() == "Other Arab Nationals".ToUpper())
{✓}
Other Arab Nationals
@if (Model.PreferredNationality.NationalityName.ToUpper() == "Other Expats".ToUpper())
{✓}
Other Expats
@Model.Remarks
Position
Date
@if (!string.IsNullOrEmpty(Model.CreatedByName))
{
Requester
@Model.CreatedDate.ToString("dd/MM/yyyy")
}
@if (Model.LineManagerUserName != null && !string.IsNullOrEmpty(Model.LineManagerUserName.ToString()) && Model.LineManagerUser > 0)
{
Line Manager
@if (@Model.LineManagerApproved == true)
{
}
else
{
}
@if (@Model.LineManagerApprovalDate != null)
{
@Model.LineManagerApprovalDate.Value.ToString("dd/MM/yyyy")
}
}
@if (Model.DepartementHeadUserName != null && !string.IsNullOrEmpty(Model.DepartementHeadUserName.ToString()) && Model.DepartementHeadUser > 0)
{
Department Head
@if (@Model.DepartementHeadApproved == true)
{
}
else
{
}
@if (@Model.DepartementHeadApprovalDate != null)
{
@Model.DepartementHeadApprovalDate.Value.ToString("dd/MM/yyyy")
}
}
@if (Model.PlanningUser != null && !string.IsNullOrEmpty(Model.PlanningUser.ToString()) && Model.PlanningUser > 0)
{
Planning
@if (@Model.PlanningApproved == true)
{
@**@
}
else
{
}
@if (@Model.PlanningApprovalDate != null)
{
@Model.PlanningApprovalDate.Value.ToString("dd/MM/yyyy")
}
}
@if (Model.RecruitmentUserName != null && !string.IsNullOrEmpty(Model.RecruitmentUserName.ToString()) && Model.RecruitmentUser > 0)
{
Recruitment
@if (@Model.RecruitmentApproved == true)
{
@**@
}
else
{
}
@if (@Model.RecruitmentApprovalDate != null)
{
@Model.RecruitmentApprovalDate.Value.ToString("dd/MM/yyyy")
}
}
@if (Model.HREDUser != null && !string.IsNullOrEmpty(Model.HREDUser.ToString()) && Model.HREDUser > 0)
{
HRE Director
@if (@Model.HREDApproved == true)
{
}
else
{
}
@if (@Model.HREDApprovalDate != null)
{
@Model.HREDApprovalDate.Value.ToString("dd/MM/yyyy")
}
}
@if (Model.CEOUser != null && !string.IsNullOrEmpty(Model.CEOUser.ToString()) && Model.CEOUser > 0)
{
CEO
@if (@Model.CEOApproved == true)
{
}
else
{
}
@if (@Model.CEOApprovalDate != null)
{
@Model.CEOApprovalDate.Value.ToString("dd/MM/yyyy")
}
}
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;
}
1 Reply
Know the answer? Post it — somebody with the same question will find it here.
Sign in to answer this question
It is the same account you read, post and publish with — and you will come straight back to this page.
Amira BedhiafiPosted Jan 14, 2025, 1:48 PM
You have some margin settings, but it could help to further control the margins to ensure that the footer section stays within the page bounds. So you need to make sure the div containing the signature, date, and reference number is not being forced to a new page and you can control this with
page-break-before,page-break-after, andpage-break-inside.You can use
page-break-inside: avoid;on the section that contains the signature and date, so it doesn't break across pages and adjustmargin-topandmargin-bottomso you get enough space for the footer to fit on the same page.When you do the printing, the content is should be scaled correctly to fit within the page without cutting off and this how you need to add the
@pagerule: