ahmedaziz
Well-known member
- Joined
- Feb 22, 2023
- Messages
- 55
- Programming Experience
- 1-3
I work on asp.net mvc i design report and it show every controls alignment success amd good
but when print it show on print preview not aligned and more controls interact with each other
so How to solve this issue please
what i try
but when print it show on print preview not aligned and more controls interact with each other
so How to solve this issue please
what i try
design page not show as it is when print:
<head>
<style>
body {
margin: 0;
}
.wrapper {
margin-left: 2%; /* Left margin */
margin-right: 2%; /* Right margin */
width: 96%; /* Width of the content area */
margin-top: 0; /* Optional: Adjust the top margin if needed */
margin-bottom: 0; /* Optional: Adjust the bottom margin if needed */
}
.header {
width: 100%;
border-bottom: solid 2px black;
display: flex;
}
.header-CompanyLogo {
width: 34mm;
/* border-left: solid 2px black;*/
display: flex;
justify-content: center;
margin-right: 300px;
}
.header-HRlogo {
width: 34mm;
/* border-right: solid 2px black;*/
display: flex;
justify-content: center;
margin-left: 300px;
}
.label-container {
display: flex;
justify-content: space-between;
}
.left-label {
text-align: left;
}
.right-label {
text-align: right;
}
.form-header {
color: black;
background-color: gray;
text-align: center;
width: 50%;
padding: 20px;
margin: 10px auto;
}
.form-header h2 {
margin: 0;
font-weight: 500;
}
.form-container {
border: 2px dashed gray;
border-bottom: none;
max-width: 100%;
padding-bottom: 10px;
margin: 0 auto;
}
.form-info {
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 5px;
background-color: gray;
}
.employee-info {
display: flex;
justify-content: space-around;
}
.id_container {
display: flex;
gap: 10px;
margin-left: 10px;
}
.name_container {
display: flex;
gap: 10px;
}
.table-border-end {
height: 50px;
border-top: 2px dashed gray;
border-bottom: 2px dashed gray;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
h1 {
text-align: center;
}
form {
margin-top: 20px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input[type="text"], textarea, input[type="date"] {
width: 100%;
padding: 5px;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 20px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.line-container {
margin-top: 30px;
}
.line {
border: none;
border-top: 1px solid black;
margin: 0;
}
.solid-table {
border-collapse: collapse;
width: 100%;
}
.solid-table th, .solid-table td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
/* added yesterday*/
.requestInfo {
padding-top: 5px;
}
.requestInfo-lable-1 {
font-size: 9px;
font-family: Tahoma;
font-weight: bold;
padding: 1px 10px;
white-space: nowrap;
}
.requestInfo-lable-4 {
font-size: 9px;
font-family: Tahoma;
font-weight: bold;
white-space: normal;
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: 63mm;
border-bottom: solid 1px black;
text-align: center;
margin-left: 5px;
}
.requestInfo-flex-div-5 {
width: 59mm;
border-bottom: solid 1px black;
text-align: center;
margin-left: 5px;
}
.requestInfo-flex-div-6 {
width: 40mm;
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;
}
</style>
</head>
<body onload="window.print();">
<div class="wrapper">
<div class="header">
<div class="header-HRlogo">
<img src="~/Images/HRlogo.jpg" style="max-width: 30mm; max-height: 15mm; margin: 15px; " />
</div>
<div class="form-header">
<h2> نموذج تسجيل استقاله <br /> Resignation Submission Form </h2>
</div>
<div class="header-CompanyLogo">
<img src="~/Images/CompanyLogo.jpg" style="max-height: 23mm; margin: 1px;" />
</div>
</div>
<div class="form-container">
<div class="form-info">
<div class="form-section">
<label for="emp-input">To be filled by the Employee</label>
</div>
<div class="form-section">
<p class="fill-by-employee">يتم ملئها من الموظف</p>
</div>
</div>
<div class="form">
<form>
<table>
<tr>
<td style="width:200px;padding-left:60px;">
<label>Emp. ID:</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-6 modelData">@Model.EmpID</label>
</td>
<td style="width:200px;">
<label for="dept-branch">:رقم الموظف</label>
</td>
<td style="width:700px;">
</td>
<td style="width:200px;">
<label>Emp Name:</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-4 modelData">@Model.EmpName</label>
</td>
<td style="width:200px;padding-right:30px;">
<label for="emp-sign">:اسم الموظف</label>
</td>
</tr>
<tr>
<td style="width:200px;padding-left:60px;">
<label>Dept./Branch:</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-4 modelData">@Model.Dept</label>
</td>
<td style="width:200px;">
<label>:الفرع/لاداره</label>
</td>
<td style="width:700px;">
</td>
<td style="width:200px;">
<label>Designation :</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-4 modelData">@Model.Designation</label>
</td>
<td style="width:200px;padding-right:30px;">
<label for="emp-sign">:المسمى الوظيفى</label>
</td>
</tr>
<tr>
<td style="width:200px;padding-left:60px;">
<label>Submittion Date:</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-4 modelData">@Model.ResignationSubmissionDate.ToString("dd/MM/yyyy")</label>
</td>
<td style="width:200px;">
<label for="dept-branch">:تاريخ تقديم الاستقاله</label>
</td>
<td style="width:700px;">
</td>
<td style="width:200px;">
<label>Mobile No:</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-4 modelData">@Model.MobileNo</label>
</td>
<td style="width:200px;padding-right:30px;">
<label for="emp-sign">:رقم الهاتف</label>
</td>
</tr>
<tr>
<td style="width:200px;padding-left:60px;">
<label for="emp-id">Last Working Date:</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-4 modelData">@Model.LastWorkingDate.ToString("dd/MM/yyyy")</label>
</td>
<td style="width:200px;">
<label for="dept-branch">:اخر يوم عمل</label>
</td>
<td style="width:700px;">
</td>
<td style="width:200px;">
<label>Employee Signature:</label>
</td>
<td style="width:300px;">
<label class="requestInfo-flex-div-4 modelData"></label>
</td>
<td style="width:200px;padding-right:30px;">
<label for="emp-sign">:توقيع الموظف</label>
</td>
</tr>
<tr>
<td style="width:200px;padding-left:60px;">
<label for="emp-id">Reason:</label>
</td>
<td style="width:300px;">
<hr />
</td>
<td style="width:200px;">
<hr />
</td>
<td style="width:700px;">
<hr />
</td>
<td style="width:200px;">
<hr />
</td>
<td style="width:300px;">
<hr />
</td>
<td style="width:200px;padding-right:30px;">
<label for="emp-sign">:سبب الاستقاله</label>
</td>
</tr>
</table>
</form>
</div>
