Share via

when print page it not show as I designed on asp.net mvc

Ahmed Abd El Aziz 315 Reputation points
2023-10-16T20:10:32.88+00:00

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

<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>
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,317 questions

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Lan Huang-MSFT 26,526 Reputation points Microsoft Vendor
    2023-10-17T05:43:22.46+00:00

    Hi @Ahmed Abd El Aziz ,

    I tested your code and you need to adjust the size of the page as well as the orientation of the page to fit the content.

    Setting the size to B4 and the orientation to landscape should be suitable.

    You can manually modify the page size and orientation in the print dialog box.

    Or set via CSS:

     @@page {
     size: B4 landscape;
 }

    User's image

    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.