Skip to Content
Menu
This question has been flagged
1 Reply
89 Views

Hello, im trying to edit the badge employees report but it inserts a third page in the end, how can i delete this?

My problem is that when I print the report with credentials, a second blank report is printed and I don't want that.


I tried to use  page-break-after and overflow: hidden but doesnt work


I configured the paperformat with custom, height 54 and width 86, disabled disabled_shrinking, margins in 0 and portrait orientation


My code is:

<t t-name="hr.print_employee_badge">

    <t t-call="web.basic_layout">

        <t t-foreach="docs" t-as="employee">

            <div class="page" t-att-style="'-webkit-transform: rotate(270deg); display: flex; justify-content: center; align-items: center; margin-left: 15px; margin-top: -80px; width: 200pt; height: 315pt; padding: 0; background-image: url(' + '/custom_background/static/src/img/front_rotated90.png' + '); background-size: 100% 100%; background-repeat: no-repeat; background-position: center;'">

                <div style="padding-top: 80px; display: flex; align-items: center;">

                    <div style="text-align: start; display: flex; flex-direction: column; gap: 4px;">

                        <img t-att-src="image_data_uri(employee.company_id.logo)" style="margin-left: 15px; height: 30px;" alt="Company Logo"/>

                    </div>

                    <div style="text-align: center;">

                        <img t-att-src="image_data_uri(employee.avatar_1920)" style="width: 70pt; height: 70pt;"/>

                    </div>

                    <div style="display: flex; flex-direction: column; justify-content: flex-end; align-items: center; font-size: 10pt; text-align: center; gap: 2px;">

                        <br/>

                        <br/>

                        <strong>

                            <span t-out="employee.name"/>

                        </strong>

                        <br/>

                        <span t-out="employee.job_id.name" style="color: red;"/>

                        <div>

                            <strong>CURP:</strong>

                            <span t-out="employee.l10n_mx_curp"/>

                        </div>

                        <div>

                            <strong>RFC:</strong>

                            <span t-out="employee.l10n_mx_rfc"/>

                        </div>

                        <div>

                            <strong>NSS:</strong>

                            <span t-out="employee.ssnid"/>

                        </div>

                        <div t-if="employee.barcode" style="overflow: hidden;">

                            <div t-field="employee.barcode" t-options="{'widget': 'barcode', 'width': 400, 'height': 40, 'img_style': 'max-width:100%;', 'img_align': 'center'}"/></div>

                    </div>

                </div>

            </div>

            <div class="page" t-att-style="'-webkit-transform: rotate(90deg); display: flex; justify-content: center; align-items: center; margin-left: 40px; margin-top: -160px; width: 185pt; height: 300pt; padding: 0; background-image: url(' + '/custom_background/static/src/img/back.png' + '); background-size: 100% 100%; background-repeat: no-repeat; background-position: center;'">

                <div style="font-size: 8pt; padding-top: 40px; display: flex; align-items: center;">

                    <div style="font-size: 12pt; text-align: center;">

                        <strong>

                            <span>Numero de empleado:</span>

                        </strong>

                    </div>

                    <div style="font-size: 10pt; text-align: center;">

                        <strong>

                            <span>Departamento: </span>

                        </strong>

                        <span t-out="employee.department_id.name"/>

                    </div>

                </div>

                <div style="position: relative; font-size: 8pt; padding-top: 20px; padding-left: 15px;">

                    <div style="text-align: start; text-indent: 35px; overflow-wrap: break-word; word-break: break-word; padding-right: 15px;">

                        <div style="font-size: 8pt; margin-bottom: 4px;">

                            <strong>Grupo sanguineo:</strong>

                            <span t-out="employee.blood_type"/>

                        </div>

                        <div style="font-size: 8pt; margin-bottom: 4px;">

                            <strong style="font-weight:700;">Alergias:</strong>

                            <span t-out="employee.allergies"/>

                        </div>

                        <div style="font-size: 8pt; margin-bottom: 4px;">

                            <strong style="font-weight:700;">Medicamentos:</strong>

                            <span t-out="employee.medications"/>

                        </div>

                        <div style="font-size: 8pt; margin-bottom: 4px;">

                            <strong>Contacto de emergencia:</strong>

                            <div style="margin-left: 15px; margin-top: 2px;">

                                <div style="margin-bottom: 2px;">

                                    <strong>Nombre:</strong>

                                    <span t-out="employee.emergency_contact"/>

                                </div>

                                <div style="margin-bottom: 2px;">

                                    <strong>Parentesco:</strong>

                                    <span t-out="employee.emergency_relation"/>

                                </div>

                                <div>

                                    <strong>Número de celular:</strong>

                                    <span t-out="employee.emergency_phone"/>

                                </div>

                            </div>

                        </div>

                    </div>

                 

                    <img t-att-src="image_data_uri(employee.company_id.logo)" style="position: absolute; top: 235px; right: 130px; height: 40px;" alt="Company Logo"/>

                </div>

            </div>

        </t>

    </t>

</t>



Avatar
Discard
Best Answer

Hi,

Use <div class="page"> for each page and break properly

Wrap the two div.page blocks per employee in a container and avoid an extra .page tag getting interpreted as a new page.

Add t-foreach on a <div> container, and use only two .page blocks per employee , like this:

<t t-name="hr.print_employee_badge">

    <t t-call="web.basic_layout">

        <div t-foreach="docs" t-as="employee">

            <!-- Front Side -->

            <div class="page" t-att-style="'width: 200pt; height: 315pt; ...'">

                <!-- Your front badge content -->

            </div>


            <!-- Back Side -->

            <div class="page" t-att-style="'width: 200pt; height: 315pt; ...'">

                <!-- Your back badge content -->

            </div>

        </div>

    </t>

</t>

Also make sure:

  1. Do not leave any blank <div> or bl ock at the end.
  2. Avoid float-based layout styles (use flex/grid ).
  3. Check your paperformat height/width — your badge paper height and width (in points or mm) must be enough for both front and back when printed.

try this 

i hope it is use full

Avatar
Discard